为什么iframe.contentWindow == null？

Question

我使用以下代码动态创建iframe.

var iframe_jquery = $("<iframe>")
    .addClass("foo")
    .appendTo(container); // container is a jQuery object containing a <div> which already exists

然后,我想访问其contentWindow,但它是null:

var iframe = iframe_jquery.get(0);
if (iframe){ // iFrame exists
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
}

所以我想:"也许iframe尚未准备好了吗？" 所以我尝试过:

iframe_jquery.ready(function(){
    var iframe = iframe_jquery.get(0);
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
});

结果相同.

怎么了？

Answer 1

上周我在使用iFrames(构建一个rtf编辑器)时遇到了这个问题,是的,它还没有准备好.

我想如果我把它放在一个.ready()它可以工作,但是.ready()当DOM准备好,而不是当iFrame加载其内容时,所以我最终用jQuery包装我的代码.load().

试试这个:

$(function () {  
    $("#myiframe").load(function () {                        
        frames["myframe"].document.body.innerHTML = htmlValue;
    });
}); 

希望这可以帮助

Answer 2

问题是,在<iframe>真正添加到页面的实际DOM之前,您将不会"真实". 这是一个小提琴演示..

Answer 3

根据浏览器的不同,访问document或者<iframe>可能会有所不同.

以下是如何处理它的示例:

if (iframe.contentDocument) // FF Chrome
  doc = iframe.contentDocument;
else if ( iframe.contentWindow ) // IE
  doc = iframe.contentWindow.document;