HTML作为沙盒iframe的"src"(IE11 / Edge)



对于HTML5,IE11/Edge中是否有任何方法可以使用除使用src URL之外的HTML填充沙盒iframe(<iframe sandbox></iframe>(?我正在寻找像srcdoc这样适用于所有其他现代浏览器的解决方案。

根据Microsoft,将src与数据 URI 一起使用不是一个选项,因为它"不能用于填充框架或 iframe 元素"。令人惊讶的是,这确实适用于我在 Edge 中,但仅适用于少于 4096 个字符的数据 URI。

我找到的所有其他选项,例如在iframe srcdoc的替代品中?和作为IFRAME源代码而不是URL的HTML代码不适用于沙盒iframe。

假设需要或可以接受使用<iframe sandbox="allow-scripts">,可能的解决方法是使用以下设置window.postMessage()

索引.html:

<!doctype html>
<html>
<body>
  <iframe onload="connectIframe()" sandbox="allow-scripts" src="iframeConnect.html" name="srcdocloader"></iframe>
  <script>
var SRCDOC_HTML = '<html><body><script src="https://code.jquery.com/jquery-3.2.1.js"></script><script>console.log("loaded srcdoc and dependencies", jQuery);</script><h1>done!</h1></body></html>';
var loaded;
function connectIframe (event) {
  if (!loaded) {
    loaded = true;
    window.frames.srcdocloader.postMessage(SRCDOC_HTML, '*');
  } else {
    onloadSrcdoc();
  }
}
function onloadSrcdoc () {
  // ...
}
  </script>
</body>
</html>

iframeConnect.html:

<!doctype html>
<script>
window.addEventListener("message", handler);
function handler(event) {
  if (event.source === window.parent) {
    window.removeEventListener("message", handler);
    document.write(event.data);
    document.close();
  }
}
</script>

请注意,iframe 的onload事件将被触发两次。第二次将在加载srcdoc html及其所有依赖项之后。

最新更新