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

javascript jquery iframe document parent

31,203

Solution 1

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>

Solution 2

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>' );

Solution 3

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

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

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

31,203

Author by

Bungle

Front-End Developer. #SOreadytohelp

Updated on December 17, 2020

Comments

Bungle over 3 years
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!
Bungle over 14 years

Thanks for the reply, but the <iframe> is in the same domain as the parent page.
ekhaled over 14 years

the +(20), if you are wondering, is because safari decides to put scrollbars on even though the contents of an iframe fit the ifram dimensions exactly... the extra 20px helps i find...
ekhaled over 14 years

You can name it anything you want, it's just a temporary variable to hold the DOM element so that it can be accessed later in $().css({})
Don Zacharias over 13 years

Should this work on Webkit browsers? Chrome still sets the height of the iframe to the height of the parent document. I am calling $(this).css ... in the iframe's onload.