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

问题描述 投票:2回答:1

使用HTML5,IE11 / Edge中是否有任何方法使用HTML而不是使用<iframe sandbox></iframe> url填充沙盒iframe(src)?我正在寻找像srcdoc这样的解决方案,它可以与所有其他现代浏览器一起使用。

使用srcdata URI不是一个选项according to Microsoft,因为它“不能用于[填充]框架或iframe元素。”令人惊讶的是,这在Edge中对我有用,但仅适用于少于4096个字符的数据URI。

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

html5 iframe internet-explorer-11 sandbox microsoft-edge
1个回答
2
投票

假设需要或接受使用<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及其所有依赖项加载之后。

© www.soinside.com 2019 - 2024. All rights reserved.