How do I refer to the document object of an <iframe> from the parent page, using jQuery?

Question

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!

Answer 1

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

Answer 2

$('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

Answer 3

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>

Answer 4

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