f11全屏，h5的全屏api失效，f11/Esc取消全屏无法监听的解决

控制全屏和取消全屏文件proFn.js

class Profn{
  constructor(vue,obj){
  }
}
// 设置 全屏
Profn.fullPage = function (element) {
    //某个元素有请求
    var requestMethod =element.requestFullScreen
      ||element.webkitRequestFullScreen //谷歌
      ||element.mozRequestFullScreen  //火狐
      ||element.msRequestFullScreen; //IE11
    if (requestMethod) {
      requestMethod.call(element);   //执行这个请求的方法
    } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
      //这里其实就是模拟了按下键盘的F11，使浏览器全屏
      var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
      if (wscript !== null) {    //创建成功
        wscript.SendKeys("{F11}");//触发f11
      }
    }
};
//取消全屏
Profn.cancelFullpage = function (element) {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
  else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
  else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  }
  else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}
export {Profn}

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

html:

<div class="screen" @click="changeScreen" v-show="!this.$route.meta.hiddenFullScreen">
  <img v-show="!fullPageBool" src="../assets/images/icon/fullScreen.png" alt="">
  <img v-show="fullPageBool" src="../assets/images/icon/quitScreen.png" alt="">
</div>

mounted:
//监听f11的全屏，f11关闭全屏，无法监听到
let that=this
window.addEventListener('keydown', function (event) {
  let e = event || window.event || arguments.callee.caller.arguments[0];
  if(e && e.keyCode == 122){//捕捉F11键盘动作
    e.preventDefault();  //阻止F11默认动作,自行定义全屏事件，否则f11全屏后，h5的全屏api失效
    let el = document.documentElement;
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API　　　　　　
    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}");
      }
    }　　　　　　
    //监听不同浏览器的全屏事件，并件执行相应的代码
    document.addEventListener("webkitfullscreenchange", function() {
      if (document.webkitIsFullScreen) {
        //全屏后要执行的代码
        that.fullPageBool=true
      }else{
        //退出全屏后执行的代码
        that.fullPageBool=false
      }
    }, false);

    document.addEventListener("fullscreenchange", function() {
      if (document.fullscreen) {
        //全屏后执行的代码
        that.fullPageBool=true
      }else{
        //退出全屏后要执行的代码
        that.fullPageBool=false
      }
    }, false);

    document.addEventListener("mozfullscreenchange", function() {
      if (document.mozFullScreen) {
        //全屏后要执行的代码
        that.fullPageBool=true
      }else{
        //退出全屏后要执行的代码
        that.fullPageBool=false
      }
    }, false);
    document.addEventListener("msfullscreenchange", function() {
      if (document.msFullscreenElement) {
        //全屏后要执行的代码
        that.fullPageBool=true
      }else{
        //退出全屏后要执行的代码
        that.fullPageBool=false
      }
    }, false)
  }
})

methods:全屏与否切换事件

changeScreen(){
  let $window = document.documentElement;
  if(!this.fullPageBool){
    Profn.fullPage($window);
  }else{
    Profn.cancelFullpage($window)
  }
  this.fullPageBool = this.fullPageBool ? false :true;
},

注意：

js可以监听到键盘的f11事件，可以对它进行干预，然后自定义全屏事件，但是无法监听浏览器的全屏事件，所以，不要再设置里面点击全屏，否则，自己定义的全屏事件会失效。

有想过使用window.onresize监听，但是改变浏览器窗口都会触发，不一定是全屏才触发，所以，无法判断是不是全屏从而改变全屏属性。所以最后是只能不在这里改变全屏模式。如果有更好的实现方式，请路过的大佬留言。