Question

我正在尝试访问位于＆lt; iframe＆gt;中的网页的文档对象来自主页。换句话说，我有一个页面，其中包含＆lt; iframe＆gt;在其中，我想在该页面（父页面）上使用jQuery来访问该＆lt; iframe＆gt;的文档对象。

具体来说，我试图在其内容呈现（onload）后找到＆lt; iframe＆gt; d文档的高度，以便我可以调整＆lt; iframe＆gt;的大小。从父页面精确匹配＆lt; iframe＆gt;内容的高度。

如果这很重要，那么＆lt; iframe＆gt;是使用JavaScript在主机页面上创建的，并且与父页面位于同一个域中。我已经使用过这种代码了：

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

填充＆lt; iframe＆gt;有内容，但我不知道获取＆lt; iframe＆gt;文档对象的确切语法。

出于某种原因，我发现很多方法可以从＆lt; iframe＆gt;中访问父文档对象。（大多数使用普通的JavaScript），但不是相反。

提前感谢您的帮助！

Answer 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>

Answer 2

如果您的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>' );

Answer 3

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

或

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

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

Answer 4

有很多方法可以访问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

Answer 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

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

5 个答案: