Question

使用javascript我正在创建一个iframe，将其添加到父DOM，然后通过iFrameEl.contentWindow.document.write（）将HTML写入其中

我需要确定在调用iFrameEl.contentWindow.document.closed（）之后iFrame中的所有内容的呈现时间。

iFrame的onload事件似乎是在最初将iframe添加到DOM之前调用的，之后我可以写入它并且我需要将它添加到DOM以便访问iFrame的contentWindow.document，所以catch 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等？

Answer 1

结帐DOMFrameContentLoaded。这是一个在加载和解析框架中的内容时将被触发的事件。

Answer 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内容

2 个答案: