确定 IFrame 已加载后何时呈现 iFrame 内容答案

【问题标题】：Determine when iFrame content is rendered after IFrame has already loaded确定 IFrame 已加载后何时呈现 iFrame 内容
【发布时间】：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 等？

【问题讨论】：

标签： javascript jquery html dom iframe

【解决方案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();

【讨论】：