前端js使瀏覽器窗口全屏與退出----瀏覽器全屏時 監測通過esc按鍵退出全屏

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">

子頁面里操作：

1.  
   getFullScreen(){
2.  
   //點擊操作是否全屏時 對標志位取反
3.  
   this.$store.commit('SET_NUM', !(this.$store.state.user.screenFlag));
4.  
   this.$store.state.user.screenFlag ?
5.  
   this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
6.  
   },
7.  
   inFullCreeen(element){
8.  
   let el = element;
9.  
   let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
10.  
    el.mozRequestFullScreen || el.msRequestFullscreen;
11.  
    // ie下是msRequestFullscreen --- 要注意大小寫啊。。
12.  
    if (typeof rfs != "undefined" && rfs) {
13.  
    rfs.call(el);
14.  
    } else if (typeof window.ActiveXObject != "undefined") {
15.  
    let wscript = new ActiveXObject("WScript.Shell");
16.  
    if (wscript != null) {
17.  
    wscript.SendKeys("{F11}");
18.  
    }
19.  
    }
20.  
    },
21.  
    outFullCreeen(element){
22.  
    let el = element;
23.  
    let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
24.  
    el.mozCancelFullScreen || el.exitFullScreen || el.msExitFullscreen;
25.  
    if (typeof cfs != "undefined" && cfs) {
26.  
    cfs.call(el);
27.  
    } else if (typeof window.ActiveXObject != "undefined") {
28.  
    let wscript = new ActiveXObject("WScript.Shell");
29.  
    if (wscript != null) {
30.  
    wscript.SendKeys("{F11}");
31.  
    }
32.  
    }
33.  
    }

到這里就可以實現通過點擊控制瀏覽器是否全屏了

問題是全屏時按鍵esc  退出全屏   導航欄不出現

瀏覽器在全屏時  監測不到esc按鍵的鍵盤事件！

解決方法一：

1.  
   created(){
2.  
   let that = this;
3.  
   //webkitfullscreenchange 是h5瀏覽器監控瀏覽器是否全屏的api
4.  
   //webkitfullscreenchange -- 谷歌 需考慮其他瀏覽器內核
5.  
   document.addEventListener('webkitfullscreenchange', function(e){
6.  
   //e.currentTarget.webkitIsFullScreen 可以判斷瀏覽器是否全屏
7.  
   if(!(e.currentTarget.webkitIsFullScreen)){
8.  
     //瀏覽器退出全屏時 將標志位置為true來顯示頂部導航
9.  
   that.$store.commit('SET_NUM', true);
10.  
    }else{
11.  
     
12.  
    }
13.  
    });
14.  
    document.addEventListener('fullscreenchange', function(e){
15.  
    if(!(e.currentTarget.isFullScreen)){
16.  
    that.$store.commit('SET_NUM', true);
17.  
    }else{
18.  
     
19.  
    }
20.  
    });
21.  
    /!* 火狐 *!/
22.  
    document.addEventListener('mozfullscreenchange', function(e){
23.  
    if(!(e.currentTarget.mozIsFullScreen)){
24.  
    that.$store.commit('SET_NUM', true);
25.  
    }else{
26.  
     
27.  
    }
28.  
    });
29.  
    /!* IE *!/
30.  
    document.addEventListener('MSFullscreenChange', function(e){
31.  
    if(!(e.currentTarget.MSIsFullScreen)){
32.  
    that.$store.commit('SET_NUM', true);
33.  
    }else{
34.  
     
35.  
    }
36.  
    });
37.  
    },

 

剛開始是通過定義全局點擊是否全屏按鈕的次數  判斷對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.csdn.net/ligaoming_123/article/details/80605748