假设使用 <iframe sandbox="allow-scripts"> 如果需要或可接受,可能会使用一种可能的解决方法 Window.postMessage() 使用以下设置:
<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及其所有依赖项都已加载。
onload
srcdoc