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