logo标签列表

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

javascriptjqueryiframedocumentparent
12

我试图访问一个包含在<iframe>中的页面的文档对象。换言之，我有一个包含<iframe>的页面，并且希望在该页面（父页面）上使用jQuery来访问该<iframe>的文档对象。

具体而言，我正在尝试找到<iframe>文档渲染完成后(即onload)的高度，以便我可以将父页面中的<iframe>大小调整为与<iframe>的内容完全匹配的高度。

如果重要的话，这个<iframe>是使用JavaScript在主机页面上创建的，并且与父页面处于同一域中。我已经使用了这种类型的代码：

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

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

出于某种原因，我发现有很多方法可以从<iframe>内部访问父文档对象（大多是使用纯JavaScript），但无从反向操作。

谢谢提前任何帮助！

5个回答
7

你是否等待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>
3
如果您的iframe标签没有src属性或者是通过JavaScript或jQuery动态创建的，您可以使用以下代码片段来引用iframe的文档并使用jQuery进行操作：
如果您的iframe标签没有src属性或者是通过JavaScript或jQuery动态创建的，您可以使用以下代码片段来引用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并向您的iframe添加一些HTML：

    $myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' );
2
$('iframe').contents().get(0)

或者

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

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

0

我最近的一个项目需要这样做，我使用了这个：

<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)是因为Safari决定即使iframe的内容完全符合iframe的尺寸，仍然要放置滚动条...我发现额外的20像素很有帮助... - ekhaled
你可以随意命名它，它只是一个临时变量，用于保存DOM元素，以便稍后在$().css({})中访问。 - ekhaled
这个在Webkit浏览器上能用吗？Chrome仍然将iframe的高度设置为父文档的高度。我正在iframe的onload中调用$(this).css ...。 - Don Zacharias
0

有很多方法可以访问 iframe：

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

<iframe name="my_frame_name" id="my_frame_id">

和 JS 代码：

frames[0] == frames['my_frame_name'] == document.getElementById('my_frame_id').contentWindow  // true
谢谢回复，但是<iframe>与父页面在同一个域中。 - Bungle
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接