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

Question

使用 HTML5，在 IE11/Edge 中有什么方法可以使用 HTML 填充沙盒 iframe (<iframe sandbox></iframe>) 而不是使用 src url?我正在寻找类似 srcdoc 的解决方案，它适用于所有其他现代浏览器。

将 src 与 data URI is not an option according to Microsoft 一起使用 "cannot be used [to] populate frame or iframe elements." 令人惊讶的是，这在 Edge 中对我有用，但仅适用于少于 4096 个字符的数据 URI。

我找到的所有其他选项，例如在 Alternatives to iframe srcdoc? and Html code as IFRAME source rather than a URL 中不适用于沙盒 iframe。

Answer 1

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

index.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 及其所有依赖项都已加载之后。

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

HTML as sandboxed iframe's `src` (IE11/Edge)

html

iframe

sandbox

internet-explorer-11

microsoft-edge