admin管理员组

文章数量:1297087

I'm trying to access the document object of a page that lives in an <iframe> from the host page. In other words, I have a page that has an <iframe> in it, and I want to use jQuery on that page (the parent page) to access the document object of that <iframe>.

Specifically, I'm trying to find the height of the <iframe>d document once its content is rendered (onload) so that I can then resize the <iframe> from the parent page to match the height of the <iframe>'s content exactly.

If it's important, this <iframe> is created on the host page using JavaScript, and is in the same domain as the parent page. I already use this type of code:

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

to populate the <iframe> with content, but I don't know the exact syntax for getting the <iframe>'s document object.

For some reason I'm finding a lot of ways to access the parent's document object from within an <iframe> (most with plain JavaScript), but not the other way around.

Thanks in advance for any help!

I'm trying to access the document object of a page that lives in an <iframe> from the host page. In other words, I have a page that has an <iframe> in it, and I want to use jQuery on that page (the parent page) to access the document object of that <iframe>.

Specifically, I'm trying to find the height of the <iframe>d document once its content is rendered (onload) so that I can then resize the <iframe> from the parent page to match the height of the <iframe>'s content exactly.

If it's important, this <iframe> is created on the host page using JavaScript, and is in the same domain as the parent page. I already use this type of code:

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

to populate the <iframe> with content, but I don't know the exact syntax for getting the <iframe>'s document object.

For some reason I'm finding a lot of ways to access the parent's document object from within an <iframe> (most with plain JavaScript), but not the other way around.

Thanks in advance for any help!

  • javascript
  • jquery
  • iframe
  • document
  • parent
Share Improve this question edited Oct 16, 2009 at 16:48 Bungle asked Oct 15, 2009 at 15:45 BungleBungle 19.7k25 gold badges81 silver badges108 bronze badges
Add a comment  | 

5 Answers 5

Reset to default 7

Did you wait for the iframe to load as well?

Anyway, the following code works in FF3.5, Chrome 3, IE6, IE7, IE8.
Hosted Demo: http://jsbin.com/amequ (Editable via 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>

If your iframe tag has no src attribute or created dynamically with javascript or jquery, you can use this code snippet to refer to document of iframe and manipulate using 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 () ;

now you can access to dom and add some html to your iframe:

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

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

or

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

will return the document of the first iframe on the page. Remember jQuery objects are arrays of the matching DOM elements

There is many ways to can access to iframe:

For example, we have this HTML page:

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

And JS:

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

I had to do this in a recent project, and I used this:

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

Although I have the function inline (makes sense in my project, as the iframe is generated via PHP), If you are appending the iframe via javascript it would be something like

$("#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

本文标签：

版权声明：本文标题：javascript - How do I refer to the document object of an &lt;iframe&gt; from the parent page, using jQuery? - Stack Over 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738536839a2094702.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。