如何使用 jQuery 从父页面引用 <iframe> 的文档对象？答案

【问题标题】：How do I refer to the document object of an <iframe> from the parent page, using jQuery?如何使用 jQuery 从父页面引用 <iframe> 的文档对象？
【发布时间】：2010-12-07 02:10:30
【问题描述】：

我正在尝试从主机页面访问位于中的页面的文档对象。换句话说，我有一个包含 <iframe> 的页面，我想在该页面（父页面）上使用 jQuery 来访问该 <iframe> 的文档对象。

具体来说，我试图在 d 文档的内容被渲染（onload）后找到它的高度，以便我可以从父页面调整 <iframe> 的大小以匹配 <iframe> 的高度>的内容。

如果它很重要，则此是使用 JavaScript 在主机页面上创建的，并且与父页面位于同一域中。我已经使用了这种类型的代码：

$('iframe').contents().find('body').append('<p>content</p>');

用内容填充，但我不知道获取 <iframe> 的文档对象的确切语法。

出于某种原因，我找到了很多从中访问父文档对象的方法（大多数使用纯 JavaScript），但反之则不行。

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery iframe document parent

【解决方案1】：

您是否也等待 iframe 加载？

无论如何，以下代码在 FF3.5、Chrome 3、IE6、IE7、IE8 中都可以使用。
托管演示：http://jsbin.com/amequ（可通过http://jsbin.com/amequ/edit 编辑）

<iframe src="blank.htm" ></iframe> 

<script> 
  var $iframe = $('iframe'); 

  /*** 
  In addition to waiting for the parent document to load 
  we must wait for the document inside the iframe to load as well. 
  ***/ 
  $iframe.load(function(){       
    var $iframeBody = $iframe.contents().find('body'); 

    alert($iframeBody.height()); 

    /*** 
    IE6 does not like it when you try an insert an element 
    that is not made in the target context. 
    Make sure we create the element with the context of 
    the iframe's document. 
    ***/ 
    var $newDiv = $('<div/>', $iframeBody.get(0).ownerDocument); 
    $newDiv.css('height', 2000); 

    $iframeBody.empty().append($newDiv); 

    alert($iframeBody.height()); 
  }); 
</script>

【讨论】：

【解决方案2】：

如果您的 iframe 标签没有 src 属性或使用 javascript 或 jquery 动态创建，您可以使用此代码 sn-p 引用 iframe 的文档并使用 jquery 进行操作：

//in your html file

<iframe id="myframe"></iframe>

//your js 

 var doc = $ ( '#myframe' )[0].contentWindow.document ;
             doc.open () ;
             doc.write ( "<div id='init'></div>" ) ;
             doc.close () ;

var $myFrameDocument = $ ( '#myframe' ).contents ().find ( '#init' ).parent () ;

现在您可以访问 dom 并将一些 html 添加到您的 iframe：

    $myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' );

【讨论】：

【解决方案3】：

$('iframe').contents().get(0)

或

$('iframe').contents()[0]

将返回页面上第一个 iframe 的文档。记住 jQuery 对象是匹配的 DOM 元素的数组

【讨论】：

【解决方案4】：

有很多方法可以访问 iframe：

例如，我们有这个 HTML 页面：

还有 JS：

frames[0] == frames['my_frame_name'] == document.getElementById('my_frame_id').contentWindow // true

【讨论】：

感谢您的回复，但与父页面在同一个域中。

【解决方案5】：

我在最近的一个项目中不得不这样做，我使用了这个：

<iframe src="http://domain.com" width="100%" 
border="0" frameborder="0" id="newIframe"
 onload="$(this).css({height:this.contentWindow ? this.contentWindow.document.body.scrollHeight + (20) : this.contentDocument.body.scrollHeight + (20)});" 
style="border:none;overflow:hidden;">

</iframe>

虽然我有内联函数（在我的项目中很有意义，因为 iframe 是通过 PHP 生成的），但如果您通过 javascript 附加 iframe，它将类似于

$("#container").append('<iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" style="border:none;overflow:hidden;"></iframe>');

$("#newIframe").load(function(){
  var _this=$("this")[0];
  $(this).css({
       height:
        _this.contentWindow ? _this.contentWindow.document.body.scrollHeight + (20) : _this.contentDocument.body.scrollHeight + (20)});
});

//contentWindow.document.body is for IE
//contentDocument.body is for everything else

【讨论】：

+(20)，如果您想知道，是因为即使 iframe 的内容完全符合 iframe 尺寸，safari 也决定放置滚动条......额外的 20px 帮助我找到...... .
你可以任意命名，它只是一个临时变量，用来保存 DOM 元素，以便稍后在 $().css({}) 中访问它
这应该在 Webkit 浏览器上工作吗？ Chrome 仍然将 iframe 的高度设置为父文档的高度。我在 iframe 的 onload 中调用 $(this).css ...。