首页 文章

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

提问于
浏览 次
1

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

我需要确定在调用iFrameEl.contentWindow.document.closed（）之后iFrame中的所有内容何时被渲染 .

当iframe最初添加到DOM之前，iFrame的onload事件似乎被调用，然后我才能写入它并且我需要将它添加到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

2 回答

  • 0

    迟到的答案，但它可能有助于某人......我发现即使在iframe被添加到DOM之后，如果我将样式表的链接从父DOM的头部添加到iframe作为String，如下所示，这意味着发生了加载事件

    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();
    回复于
  • 0

    看看DOMFrameContentLoaded . 这是在加载和解析框架中的内容时将触发的事件 .

    回复于

相关问题