如何让JavaScript全屏功能兼容支持IE 10浏览器？

很遗憾，IE 10确实没有原生支持元素级的全屏API——你用到的msRequestFullScreen是IE 11才引入的特性。不过我们可以通过两种替代方案来实现类似的效果，具体看你的使用场景：

方案一：视觉模拟全屏（推荐） #

这种方法是通过CSS和JS将目标元素拉伸至整个视口，模拟全屏的视觉效果，这是IE 10下兼容性最好的方案，不需要特殊权限。

具体实现代码如下：

function toggleSimulatedFullscreen(id) {
  const targetElement = document.getElementById(id);
  const isInFullscreen = targetElement.classList.contains('simulated-fullscreen');

  if (!isInFullscreen) {
    // 保存元素原有样式，方便后续恢复
    targetElement.dataset.originalStyles = targetElement.getAttribute('style') || '';
    
    // 设置全屏样式：固定定位占满整个视口，层级拉满
    targetElement.style.position = 'fixed';
    targetElement.style.top = '0';
    targetElement.style.left = '0';
    targetElement.style.width = '100vw';
    targetElement.style.height = '100vh';
    targetElement.style.zIndex = '9999';
    targetElement.style.margin = '0';
    targetElement.style.padding = '0';
    
    // 添加标记类，方便判断状态
    targetElement.classList.add('simulated-fullscreen');
    
    // IE 10中滚动到页面顶部可以隐藏地址栏，增强全屏体验
    window.scrollTo(0, 1);
  } else {
    // 恢复元素原有样式
    targetElement.setAttribute('style', targetElement.dataset.originalStyles);
    targetElement.classList.remove('simulated-fullscreen');
  }
}

注意事项： #

• 这不是系统级的全屏，只是视觉上占满屏幕，浏览器的标题栏可能仍会显示，但已经能满足大部分场景的需求。
• 如果目标元素有父级容器的定位限制，可能需要调整父级的样式，或者将元素临时移到body下再设置全屏样式。

方案二：ActiveX控件实现浏览器级全屏（仅限特定环境） #

如果你的应用运行在企业内部等可控环境，且IE 10的安全设置允许ActiveX控件运行，可以尝试用Shell.Application来切换整个浏览器的全屏状态。不过这个方法只能让整个浏览器全屏，不能指定单个元素，而且会触发浏览器的安全提示。

代码示例：

function toggleBrowserFullscreen() {
  try {
    const shell = new ActiveXObject("Shell.Application");
    shell.ToggleFullScreen();
  } catch (error) {
    console.error("ActiveX控件不可用：", error);
    // 这里可以降级调用方案一的模拟全屏函数
    toggleSimulatedFullscreen('your-element-id');
  }
}

注意事项： #

• 普通用户的IE 10默认会禁用ActiveX，所以这个方案只适合内部系统等特殊场景。
• 该方法控制的是整个浏览器的全屏状态，而非单个页面元素。

总结一下，在IE 10中，视觉模拟全屏是最通用的解决方案；如果是可控环境，ActiveX可以作为补充选项。

内容的提问来源于stack exchange，提问作者Sang Tran