完美解决页面全屏后esc按键监听不到的问题

页面中有个全屏与退出全屏的按钮图标  正常这两个图标切换是正常的 但是如果用esc键去退出全屏 图标显示就会错乱 想通过kepdown事件重写这个方法 全屏后esc按键死活都不触发事件 所以这个方案被pass

想着可以通过resize事件来监听页面变化 于是试了试 发现可以解决我的问题

 

// 全屏时候按快捷键取消全屏
    window.onresize = () => {
      if (!isFullscreen()) {
        //要执行的动作
        this.isFull = false;
      }
    };
    window.addEventListener('keydown', function (event) {
      //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏
      const e = event || window.event;
      if (e && e.keyCode === 122) {
        e.preventDefault();
      }
      if (e && e.keyCode === 27) {
        //esc退出全屏动作
         exitFullScreen();
      }
    });

   fullScreen(type) {
      if (type) {
        fullScreen();
      } else {
        exitFullScreen();
      }
      this.isFull = type;
    },

/***
@文件名：fullScreen.js
@描述：全屏按钮操作
***/
/**
@方法名：fullScreen
@来源：Winford.Wang|2021-10-15，09:48
@参数：
@返回：
@描述：开启全屏
**/
function fullScreen() {
  var el = document.documentElement,
    rfs =
      el.requestFullScreen ||
      el.webkitRequestFullScreen ||
      el.mozRequestFullScreen ||
      el.msRequestFullScreen,
    wscript;

  if (typeof rfs != 'undefined' && rfs) {
    rfs.call(el);
    return;
  }
  if (typeof window.ActiveXObject != 'undefined') {
    wscript = new ActiveXObject('WScript.Shell');
    if (wscript) {
      wscript.SendKeys('{F11}');
    }
  }
}
/**
 @方法名：exitFullScreen
 @来源：Winford.Wang|2021-10-15，09:48
 @参数：
 @返回：
 @描述：关闭全屏
 **/
function exitFullScreen() {
  var el = document,
    cfs =
      el.cancelFullScreen ||
      el.webkitCancelFullScreen ||
      el.mozCancelFullScreen ||
      el.exitFullScreen,
    wscript;

  if (typeof cfs != 'undefined' && cfs) {
    cfs.call(el);
    return;
  }

  if (typeof window.ActiveXObject != 'undefined') {
    wscript = new ActiveXObject('WScript.Shell');
    if (wscript != null) {
      wscript.SendKeys('{F11}');
    }
  }
}
/**
 @方法名：isFullscreen
 @来源：Winford.Wang|2021-10-15，09:48
 @参数：
 @返回：true 开启/ 关闭
 @描述：检测全屏
 **/
function isFullscreen() {
  let explorer = window.navigator.userAgent.toLowerCase();
  if (explorer.indexOf('chrome') > 0) {
    //webkit
    return (
      document.body.scrollHeight === window.screen.height &&
      document.body.scrollWidth === window.screen.width
    );
  } else {
    //IE 9+  fireFox
    return (
      window.outerHeight === window.screen.height &&
      window.outerWidth === window.screen.width
    );
  }
  //
  // return (
  //   document.fullscreenElement ||
  //   document.msFullscreenElement ||
  //   document.mozFullScreenElement ||
  //   document.webkitFullscreenElement ||
  //   false
  // );
}

export { fullScreen, exitFullScreen, isFullscreen };