Question

我动态修改了iframe的HTML内容，如何知道HTML加载何时完成？

<iframe id="myIframe" />
<script>
    var iframeDoc = document.getElementById('myIframe').contentWindow.document;
    iframeDoc.innerHTML = "<html>complex html with external stylesheets/images</html>";
    //this can take 1-10 secs to visually render b/c of external css/imgs
</script>

尝试通过html-tag以编程方式和声明方式向iframe元素添加onload，但不起作用。

还尝试了iframeDoc.write，srcdoc属性而不是更改innerHTML，没有帮助

PS。请注意，这是关于直接修改iframe（或任何元素的）HTML，而不是更改明显会触发src事件的onload属性

Answer 1

你并不是真的在这里“加载”文档到iframe，而不是传统的“加载”定义意味着HTTP请求，所以我怀疑你是否可以通过这个来发起加载事件。

使用数据URI来设置iframe内容可能是一种方法，但这在IE / Edge中无效（https://caniuse.com/#feat=datauri）

创建包含HTML文档的 Blob ，然后使用createObjectURL创建可分配给iframe源的网址。这样，它的行为应该与通过HTTP（S）URL将文档“正常”加载到iframe中的方式相同，因此也会触发您在此情况下所期望的相同事件。

https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#Example https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Answer 2

尝试这样的事情来了解它的加载时间

document.getElementById('my_iframe').onload = function() {
    // Your actions here
}

Answer 3

同源安全策略与iframes存在许多限制，您无法直接从iframe执行脚本到父窗口，但是因为iframe有自己的生命周期，您可以使用postMessage() API进行沟通。

window.postMessage（）方法安全地启用跨源 Window对象之间的通信;例如，在页面和页面之间它产生的弹出窗口，或嵌入的页面和iframe之间的弹出窗口在其中。

沟通两者的重要部分是：

<body onLoad="parent.postMessage('done', '*')"></body>

如果通过脚本标记添加侦听器，您将得到相同的结果

var iframe = document.querySelector('#myIframe');

iframe.srcdoc = "<html><body onLoad=\"parent.postMessage('loaded', '*')\">complex html with external stylesheets/images</body></html>";

window.addEventListener('message', function(event) { 
  console.log('The iframe says:' + event.data);
});

<iframe id="myIframe"></iframe>

或将其与数据URI一起使用：

var iframe = document.querySelector('#myIframe');
var html = "<html><body onLoad=\"parent.postMessage('loaded', '*')\">complex html with external stylesheets/images</body></html>";

iframe.src = 'data:text/html,' + encodeURIComponent(html);

window.addEventListener('message', function(event) { 
  console.log('The iframe says:' + event.data);
});

<iframe id="myIframe"></iframe>

但是，当然，你有IE的限制，它不支持srcdoc数据URI

iframe更改html内容 - 任何＆＃34;渲染完成＆＃34;事件？

3 个答案: