如何用JavaScript关闭IE兼容模式？iframe场景Meta标签失效解决方案

嘿，我完全懂你遇到的这个头疼问题——iframe里的X-UA-Compatible meta标签根本不起作用，因为主文档已经把浏览器拽进兼容模式了，还没法修改主文档的代码对吧？别慌，这里有几个实用的解决方案：

1. 动态重写文档头部（适用于IE 8-11） #

如果iframe的内容是你能控制的，可以在页面加载的最早期（最好在DOMContentLoaded事件触发前）执行这段JavaScript代码，强制让浏览器重新解析兼容模式标签：

// 检测当前是否为IE浏览器
const isIE = window.navigator.userAgent.indexOf('MSIE') !== -1 || !!document.documentMode;

if (isIE) {
  // 检查当前文档模式是否不是Edge模式（IE11的Edge模式对应值为11）
  if (document.documentMode !== 11) {
    // 重写整个HTML文档，把X-UA-Compatible标签放在最开头
    document.write('<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge" />');
    document.write(document.head.innerHTML);
    document.write('</head><body>');
    document.write(document.body.innerHTML);
    document.write('</body></html>');
    document.close();
  }
}

这个方法的核心是用document.write重新构建整个文档，让浏览器从头开始解析，这样X-UA-Compatible标签就能生效了。注意要尽早执行，避免页面内容渲染过多导致明显的闪烁。

2. 使用HTTP响应头（最推荐的方案） #

如果iframe对应的页面是你自己的服务器托管的，直接在服务器配置里添加X-UA-Compatible响应头是最可靠的办法——因为浏览器在开始加载页面之前就会读取这个头，完全不受主文档的影响。
不同服务器的配置方式如下：

• Apache：在.htaccess文件中添加

  Header set X-UA-Compatible "IE=edge"
  

• Nginx：在server或location配置块中添加

  add_header X-UA-Compatible "IE=edge";
  

• ASP.NET：在web.config的<httpProtocol>节点下配置

  <httpProtocol>
    <customHeaders>
      <add name="X-UA-Compatible" value="IE=edge" />
    </customHeaders>
  </httpProtocol>
  

3. 跨文档通信（仅当主文档可配合时） #

如果主文档的开发者愿意配合，你可以在iframe里通过postMessage发送请求，让主文档动态插入X-UA-Compatible标签并刷新页面。不过这个方案依赖主文档的支持，如果你没法修改主文档的话，这个方法就不适用了。

内容的提问来源于stack exchange，提问作者Jeff Hernandez