IE11下keydown事件触发msRequestFullscreen无响应问题求解

问题根因 #

• IE11的msRequestFullscreen方法要求必须传入配置参数（即使是空对象{}），你现有代码调用时没有传参，所以无响应也不抛错，这是IE11的专属特性。
• 你的状态更新代码存在变量名大小写错误：判断逻辑使用this.isInFullScreen，赋值时写的是this.InFullScreen，会导致状态判断逻辑混乱。
• 现有polyfill的封装逻辑不完善，没有针对IE11的参数要求做兼容处理。

修复方案 #

1. 修正polyfill逻辑

针对IE11的参数要求做适配封装：

let doc = document as any;
// 适配全屏触发方法
if (!document.body.requestFullscreen) {
  document.body.requestFullscreen = function () {
    if (doc.body.msRequestFullscreen) {
      // IE11必须传入配置参数，空对象即可
      return doc.body.msRequestFullscreen({});
    }
    return doc.body.mozRequestFullScreen?.() || doc.body.webkitRequestFullscreen?.();
  };
}
// 适配退出全屏方法
if (!document.exitFullscreen) {
  document.exitFullscreen = doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
}

2. 修正按键监听逻辑

修复状态变量拼写错误，保证状态一致性：

if (args.keyCode === 70) {
  args.preventDefault();
  if (!this.isInFullScreen) {
    document.body.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
  // 修正变量名大小写不一致问题
  this.isInFullScreen = !this.isInFullScreen;
}

额外优化建议 #

推荐通过全屏状态变更事件同步状态，避免手动维护状态出错，兼容多浏览器的事件监听写法如下：

const doc = document as any;
const fullscreenChangeHandler = () => {
  this.isInFullScreen = !!(doc.fullscreenElement || doc.mozFullScreenElement || 
    doc.webkitFullscreenElement || doc.msFullscreenElement);
};
// 监听各浏览器的全屏变更事件
document.addEventListener('fullscreenchange', fullscreenChangeHandler);
document.addEventListener('mozfullscreenchange', fullscreenChangeHandler);
document.addEventListener('webkitfullscreenchange', fullscreenChangeHandler);
document.addEventListener('msfullscreenchange', fullscreenChangeHandler);

内容的提问来源于stack exchange，提问作者Oleksii Pavliuk