53

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

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

然后，我想访问它的 contentWindow，但它是空的：

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
});

结果相同。

怎么了？

4

5 回答 5

43

上周我在玩 iframe（构建 rtf 编辑器）时遇到了这个问题，是的，它还没有准备好。

我想如果我把它放在 a 中.ready()，它会起作用，但是.ready()当 DOM 准备好时，而不是当 iframe 加载其内容时，所以我最终用 jQuery 包装了我的代码.load()。

所以试试这个：

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

希望这可以帮助

于 2012-08-30T15:03:34.637 回答
21

问题是你<iframe>不会是“真实的”，直到它真正添加到页面的实际 DOM 中。 这是一个要演示的小提琴。.

于 2012-08-30T15:10:20.840 回答
7

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

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

if (iframe.contentDocument) // FF Chrome
  doc = iframe.contentDocument;
else if ( iframe.contentWindow ) // IE
  doc = iframe.contentWindow.document;
于 2012-08-30T15:03:06.100 回答
3

您还可以通过设置 iframe 的 onload 属性来创建将在 iframe 完成加载时执行的函数。

于 2016-12-24T12:37:43.983 回答
2

书签版

只是出于好奇，我想我会把它放在一起。记住 iframe 和加载事件在不同的浏览器（主要是旧的、分崩离析的、应该死的浏览器）上不能很好地协同工作......加上不完全确定 jQuery 如何解决这个问题......我的大脑决定这将得到更好的支持（无论是否存在）：

$(function(){
  /// bind a listener for the bespoke iframeload event
  $(window).bind('iframeload', function(){
    /// access the contents of the iframe using jQuery notation
    iframe.show().contents().find('body').html('hello');
  });
  /// create your iframe
  var iframe = $('<iframe />')
        /// by forcing our iframe to evaluate javascript in the path, we know when it's ready
        .attr('src', 'javascript:(function(){try{p=window.parent;p.jQuery(p).trigger(\'iframeload\');}catch(ee){};})();')
        /// insert the iframe into the live DOM
        .appendTo('body');
});

采用这种方法的原因是，从 iframe 本身内部触发加载事件通常要好得多。但这意味着将适当的文档加载到 iframe 中，因此对于动态 iframe，这有点乏味。这是加载文档和不加载文档之间的一种混合。

以上适用于我迄今为止测试过的所有内容 - 是的，你是对的 - 这有点荒谬，不是面向未来的，可能还有其他带有负面含义的东西；）

关于这篇文章，我要说的一件积极的事情是，它介绍了.contents()访问 iframe 文档的使用，这至少有点用...

于 2012-08-30T15:53:04.173 回答