确定 IFrame 已加载后何时呈现 iFrame 内容
Posted
技术标签:
【中文标题】确定 IFrame 已加载后何时呈现 iFrame 内容【英文标题】：Determine when iFrame content is rendered after IFrame has already loaded 【发布时间】：2017-03-16 02:14:08 【问题描述】：我正在使用 javascript 创建一个 iframe，将其添加到父 DOM，然后通过 iFrameEl.contentWindow.document.write() 将 html 写入它
在调用 iFrameEl.contentWindow.document.closed() 后，我需要确定 iFrame 中的所有内容何时呈现。
iframe 的 onload 事件似乎在 iframe 最初添加到 DOM 时被调用，然后我才能写入它，我需要将它添加到 DOM 以便访问 iFrame 的 contentWindow.document，所以抓住22.
在 Chrome 中，作为替代方法，我使用 srcdoc 属性将我需要的所有内容添加到 iframe，并将 iframe 添加到 dom 并等待 onload 事件，但是 IE 不支持 srcdoc
var iFrameHTML = '<!DOCTYPE html><html><head>';
iFrameHTML = iFrameHTML + '</head><body>' + htmlIncludingImagesEtc + '</body></html>';
iFrameEl.srcdoc = iFrameHTML;
myDiv.append(iFrame);
iFrameEl.onload = function()
//proceed
我知道 iFrame 的 src 属性也可以使用，但 Data URI characters 的限制使我无法使用该方法
我知道这里有很多类似的问题，但我找不到任何符合我要求的问题。
我需要动态创建一个 iFrame，向其中添加内容并确定所有内容何时呈现，是否有一些明显的方法可以实现这一点，还是需要 MutationObservers 等？
【问题讨论】：
【参考方案1】：查看DOMFrameContentLoaded。这是一个在框架中的内容被加载和解析时触发的事件。
【讨论】：
此事件“在框架完成加载和解析时执行，无需等待样式表、图像和子框架完成加载”，而我需要检测所有图像等何时加载 【参考方案2】：迟到的答案，但它可能对某人有所帮助...我发现即使在将 iframe 添加到 DOM 之后，如果我将样式表的链接从父 DOM 的头部添加到 iframe 作为字符串，如下所示, 表示发生了加载事件
iFrame$.on('load',function()
//iFrame loaded
);
var headHTML = '<head>';
$('head link').each(function(index, link)
headHTML = headHTML + link.outerHTML;
);
headHTML = headHTML + '</head>';
iFrameDoc.open();
iFrameDoc.write("<!DOCTYPE html>");
iFrameDoc.write("<html>");
iFrameDoc.write(headHTML);
iFrameDoc.write("</body>");
iFrameDoc.write("</html>");
iFrameDoc.close();
【讨论】：
以上是关于确定 IFrame 已加载后何时呈现 iFrame 内容的主要内容，如果未能解决你的问题，请参考以下文章
当浏览器请求部分内容范围请求时，如何检测何时在 iframe 中加载 pdf？
如何识别网页是在 iframe 中加载还是直接加载到浏览器窗口中？