IE浏览器框架网页显示空白及内嵌HTML内容兼容方案咨询

以下方案可解决IE下无法直接给框架写入HTML内容、框架页加载空白的问题，全IE版本兼容：

方案1：data URI 赋值iframe src属性 #

IE 8及以上版本支持通过data:text/html格式的URI作为iframe的src地址，可替代srcdoc属性的作用，不需要额外部署独立的HTML文件。

<iframe id="compatIframe" frameborder="0" width="100%" height="500"></iframe>
<script>
// 待嵌入的自定义HTML内容
const targetHtml = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { padding: 24px; font-size: 14px; }
  </style>
</head>
<body>
  <h4>直接嵌入的HTML内容</h4>
  <p>无需独立文件地址即可渲染</p>
</body>
</html>
`;
// URL编码后赋值给src
document.getElementById('compatIframe').src = 'data:text/html;charset=utf-8,' + encodeURIComponent(targetHtml);
</script>

注意事项：IE 8对data URI有32KB的长度限制，嵌入内容超过该大小时会加载失败；IE 9-11无此限制。

方案2：直接向iframe文档流写入内容（优先推荐） #

该方案无任何API依赖、无内容长度限制，支持所有IE版本，是适配IE场景的最优选择。通过获取iframe的内部document对象，直接写入HTML内容触发渲染即可。

<iframe id="writeIframe" frameborder="0" width="100%" height="500"></iframe>
<script>
const targetHtml = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <!-- 任意长度的自定义HTML内容 -->
</body>
</html>
`;
const iframeDoc = document.getElementById('writeIframe').contentWindow.document;
iframeDoc.open();
iframeDoc.write(targetHtml);
iframeDoc.close();
</script>

框架页空白常见排查点 #

• FRAMESET标签书写不符合规范：<frameset>标签不能和<body>标签同时存在于页面中，使用框架集的页面需要直接用<frameset>替换<body>标签的位置，否则IE下会直接渲染空白。
• 编码不匹配：嵌入的HTML内容未声明和父页面一致的字符集，会导致IE解析内容乱码甚至空白，需在嵌入内容的头部添加和父页面编码一致的meta标签，例如<meta charset="utf-8">。
• 本地安全限制：通过file协议本地打开页面时，IE默认会阻止iframe的脚本和内容加载，点击页面底部弹出的安全提示栏选择「允许阻止的内容」即可正常渲染，线上HTTP/HTTPS环境无该限制。

FRAME、FRAMESET、embed、object标签均不支持直接写入HTML内容，没有适配原生内容嵌入的可行性，建议统一使用iframe作为嵌入容器。

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