Alex Rivera | Logout

How to auto-size an iFrame?

Asked 2008-10-29T14:59:00.463
66

Possible Duplicate:
Resizing an iframe based on content

I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.

To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.

Edit
Report

3 Answers

37

On any other element, I would use the scrollHeight of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.

Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the offsetHeight:

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

And attach that to run with the iframe-body's onLoad event.

answered 2008-10-29T15:06:31.523
14
answered 2011-09-13T12:47:34.787
-1

Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:

Note: there's a bit of jquery ahead:


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
answered 2008-10-29T18:12:21.663

Your Answer