前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）

最新推荐文章于 2023-12-22 14:16:26 发布

原创最新推荐文章于 2023-12-22 14:16:26 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在Vue.js项目中如何实现在特定页面的全屏功能，并在全屏状态下隐藏顶部导航。通过在store中设置全局状态`screenFlag`来控制导航显示。全屏时遇到的问题是，浏览器全屏模式下无法监听到ESC键退出全屏。解决方案是利用全屏时浏览器提供的伪类，当检测到全屏状态时，将导航栏的display设为none，避免使用全局变量控制。参考链接提供了更多关于全屏样式伪类的详细信息。

vue项目项目分为顶部导航、侧边导航、以及右边mainContent区域

需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏

实现：

1.在state里定义一个全局flag 根据这个flag来控制顶导航的显示与隐藏

定义在了usr module里在store里引入就可以了

2.在页面上的操作

顶导航页面：

<el-header class="header" :style="{'display': (this.$store.state.user.screenFlag ? 'block': 'none')}">

通过定义的全局标志位控制顶导航是否显示
子页面里：
<i class="el-icon-rank" @click="getFullScreen">

子页面里操作：

getFullScreen(){
  //点击操作是否全屏时  对标志位取反
  this.$store.commit('SET_NUM', !(this.$store.state.user.screenFlag));
  this.$store.state.user.screenFlag ?
    this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
},
inFullCreeen(element){
  let el = element;
  let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
    el.mozRequestFullScreen || el.msRequestFullscreen;
         // ie下是msRequestFullscreen   --- 要注意大小写啊。。
  if (typeof rfs != "undefined" && rfs) {
    rfs.call(el);
  } else if (typeof window.ActiveXObject != "undefined") {
    let wscript = new ActiveXObject("WScript.Shell");
    if (wscript != null) {
      wscript.SendKeys("{F11}");
    }
  }
},
outFullCreeen(element){
  let el = element;
  let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
    el.mozCancelFullScreen || el.exitFullScreen || el.msExitFullscreen;
  if (typeof cfs != "undefined" && cfs) {
    cfs.call(el);
  } else if (typeof window.ActiveXObject != "undefined") {
    let wscript = new ActiveXObject("WScript.Shell");
    if (wscript != null) {
      wscript.SendKeys("{F11}");
    }
  }
}

到这里就可以实现通过点击控制浏览器是否全屏了

问题是全屏时按键esc 退出全屏导航栏不出现

浏览器在全屏时监测不到esc按键的键盘事件！

解决方法一：

created(){
  let that = this;
      //webkitfullscreenchange  是h5浏览器监控浏览器是否全屏的api
      //webkitfullscreenchange -- 谷歌  需考虑其他浏览器内核
  document.addEventListener('webkitfullscreenchange', function(e){
     //e.currentTarget.webkitIsFullScreen  可以判断浏览器是否全屏 
  if(!(e.currentTarget.webkitIsFullScreen)){
      //浏览器退出全屏时  将标志位置为true来显示顶部导航
      that.$store.commit('SET_NUM', true);
    }else{

    }
   });
     document.addEventListener('fullscreenchange', function(e){
        if(!(e.currentTarget.isFullScreen)){
          that.$store.commit('SET_NUM', true);
        }else{

        }
      });
      /!* 火狐 *!/
      document.addEventListener('mozfullscreenchange', function(e){
        if(!(e.currentTarget.mozIsFullScreen)){
          that.$store.commit('SET_NUM', true);
        }else{

        }
      });
      /!* IE *!/
      document.addEventListener('MSFullscreenChange', function(e){
        if(!(e.currentTarget.MSIsFullScreen)){
          that.$store.commit('SET_NUM', true);
        }else{

        }
      });
},

刚开始是通过定义全局点击是否全屏按钮的次数判断对2取余来全屏或退出

esc按键时这个数加乱了很错乱

另外监测浏览器是否全屏的方法从网上找的

checkFull() return isFull 那个在我这不管用

解决方法二：

刚知道全屏时样式有伪类。。

那么问题就更简单了只需要全屏的时候让导航栏display:none就可以了

也不用设置全局变量来关联header的行内样式了

只需要在主布局文件里加上如下样式：

:-webkit-full-screen .header {
  display: none!important;
}
:-moz-full-screen .header {
  display: none!important;
}
:-ms-fullscreen .header {
  display: none!important;
}
:fullscreen .header {
  display: none!important;
}

样式参考链接：

全屏时的伪类等等

https://blog.youkuaiyun.com/ligaoming_123/article/details/80605748