我如何引用的文檔對象 <iframe> 從父頁面，使用jQuery？

Question

我正在嘗試從主機頁面訪問位於<iframe>中的頁面的文檔對象。 換句話說，我有一個頁面中有一個<iframe>，我想在該頁面（父頁面）上使用jQuery來訪問該<iframe>的文檔對象。

具體來說，我試圖在呈現其內容（onload）后找到<iframe> d文檔的高度，以便我可以從父頁面調整<iframe>以匹配<iframe>的高度准確的內容。

如果這很重要，則使用JavaScript在主機頁面上創建此<iframe>，並且該頁面與父頁面位於同一個域中。 我已經使用過這種代碼了：

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

使用內容填充<iframe>，但我不知道獲取<iframe>的文檔對象的確切語法。

出於某種原因，我發現很多方法可以從<iframe>（大多數使用純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

我如何引用的文檔對象 <iframe> 從父頁面，使用jQuery？

問題描述

5 個解決方案

解決方案1
4 2009-10-15 17:09:52

解決方案2
3 2014-12-16 21:14:34

解決方案3
1 2009-10-15 16:04:34

解決方案4
0 2009-10-15 15:53:13

解決方案5
0 2009-10-15 22:10:26

我如何引用的文檔對象 <iframe> 從父頁面，使用jQuery？

問題描述

5 個解決方案

解決方案1 4 2009-10-15 17:09:52

解決方案2 3 2014-12-16 21:14:34

解決方案3 1 2009-10-15 16:04:34

解決方案4 0 2009-10-15 15:53:13

解決方案5 0 2009-10-15 22:10:26

解決方案1
4 2009-10-15 17:09:52

解決方案2
3 2014-12-16 21:14:34

解決方案3
1 2009-10-15 16:04:34

解決方案4
0 2009-10-15 15:53:13

解決方案5
0 2009-10-15 22:10:26