How to resize IFrame to it’s content full height

When working with IFrame, we may want the frame taking the 100% height of its content. In fact, we want to simulate the IFrame to look like a DIV. It is not simple as setting height 100% and overflow none.

The content of the IFrame content load after the current page is loaded or after the “src” attribute change. So we are not able to have the IFrame content height or width until the data is rendered. It exist an event handler called “onload” that trigger once the content is loaded, but it is not possible to get the content body height, in fact it will alway’s return 0. By googling, I’ve found a lot of solutions, but none of them was working properly or at least working like I wanted. Because of that, I’ve written my own solution.

My solution is to use a “setTimeout” until the IFrame content is fully rendered on the page and after that, we are able to get the iframe content height and set it to the IFrame itself. In the following solution I actually use JQuery. If you need to convert it to normal JavaScript, it should be pretty easy.

Write this into your HTML:

1
2

<iframe id="iframeId" name="iframeId" onload="sizeIFrame(this.id)" style="width:100%">
</iframe>

Write this in your javascript (header or JS file):

1
2
3
4
5
6
7
8
9
10
11
12

function sizeIFrame(frameId) {
	var myIFrame = $("#" + frameId);
	var innerDoc = (myIFrame.get(0).contentDocument) ? myIFrame.get(0).contentDocument : myIFrame.get(0).contentWindow.document;
 
	try {// will throw an exception if the body is not fully loaded.
		myIFrame.height(innerDoc.body.scrollHeight + 35);
	} catch (e) { }
 
	if (innerDoc.body && innerDoc.body.scrollHeight == 0) {
		setTimeout(function() { sizeIFrame(frameId); }, 100);
	}
}

If you are having any problem please leave a comment.

This solution have only been tested on Internet Explorer 6/7