Dan*_*ner 5 html iframe sandbox internet-explorer-11 microsoft-edge
使用 HTML5，在 IE11/Edge 中，<iframe sandbox></iframe>除了使用srcurl之外，还有什么方法可以用 HTML填充沙盒 iframe ( )吗？我正在寻找一种srcdoc适用于所有其他现代浏览器的解决方案。
根据 Microsoft 的说法，src与数据 URI一起使用不是一个选项，因为它“不能用于[来]填充框架或 iframe 元素”。令人惊讶的是，这在 Edge 中对我有用，但仅适用于少于 4096 个字符的数据 URI。
我找到的所有其他选项，例如在iframe srcdoc 的替代方案中？和Html 代码作为 IFRAME 源而不是 URL不适用于沙盒 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事件将被触发两次。第二次将在srcdochtml 及其所有依赖项加载之后。
| 归档时间： |
|
| 查看次数： |
2757 次 |
| 最近记录： |