jQuery : Auto iFrame Height

Mon, Apr 20, 2009

This article will show you how to automatically adjust the height of an iFrame to the height of the content inside of the iFrame with the use of the jQuery JavaScript library and the jQuery autoHeight plugin.

When you have an iFrame on a page and the height of the content in the iFrame is larger than the default or specified height of the iFrame, a vertical scrollbar will be shown which allows you to scroll the content inside the iFrame.

You can remove the scrollbar by adding the attribute scrolling="no" to the iFrame element but the overflowing content will simply be hidden. Alternatively, you can define an overflow:hidden; CSS style attribute to the iFrame but it will also just hide the overflowing content in the iFrame and won’t adjust the height of the iFrame to cater for the content inside it.

The solution is to automatically adjust the height of the iFrame – after it has loaded – according to the height of the content inside of it. This can be done with the jQuery autoHeight plugin.

Reference jQuery

Before you can automatically adjust the height of iFrames on your page(s) with the use of the jQuery autoHeight plugin, you’ll need to reference the actual jQuery library on your site. You can do so by downloading jQuery and referencing the script on your page(s). Put jQuery on your server and use the following code to reference the script.

The code above will load jQuery if the “jquery.js” file is in the same directory as the current file. If you put jQuery into a subfolder like “js” for example, the SRC attribute in the code above should be changed to “js/jquery.js”.

Reference the autoHeight plugin

With the jQuery SCRIPT tag in your page, you’ll need to reference the jQuery autoHeight plugin as well. Same way as you did with jQuery, you’ll need to download the jQuery autoHeight plugin and put its JavaScript file on your server and reference it with a SCRIPT tag like below.

Add Class Name

All that is left to do is to add a class name to the iFrame(s) which need to be automatically adjusted in height in order to fit all of the content into the iFrame without any scrollbars. Below is an example.

jQuery Auto iFrame Height Demonstration

UPDATE : Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.

Share and Enjoy:

auto adjust iframe, auto height, auto iframe height, autoheight, height of iframe, iframe auto height, iframe height, iframe height adjust, iframe scrolling, jquery, jquery auto iframe height, jquery autoHeight plugin, no scrollbars

This post was written by:

Antonie Potgieter - who has written 52 posts on Lost-In-Code.

I (Antonie Potgieter) am a software engineer/web developer located in South Africa. My full-time work is the management of Tribulant Software and the development of its software packages.

Contact the author

32 Comments For This Post

micha149 Says:
April 22nd, 2009 at 5:36 am

Sorry, but what makes this javascript to jQuery-Plugin? Nothing!

Antonie Potgieter Says:
April 22nd, 2009 at 7:05 am

@micha149

Thank you for your comment. Are you saying that the plugin doesn’t do anything? Like it doesn’t have any effect? Did you add the class name “autoHeight” (case sensitive) to your iFrame? If you show me a URL to your page I can check for you. You might have JavaScript conflicts on your page which terminates execution of your scripts.

Best,
Antonie

Gus Z Says:
April 24th, 2009 at 4:50 pm

Tiis is my code and it doesnt work, can you help me Antonie?

Note: In this page I have 3 iframes, but I need to apply your script on the iframe called “contenido”.

I downloaded autoHeight.js and both jQuery library (jquery-1.3.2.js and jquery-1.3.2.min.js) and these files are on the same folder than the html code file. Im working on my local machine.

Please help me. Thanks!!!

<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i

Antonie Potgieter Says:
April 25th, 2009 at 4:59 am

@Gus Z
Did you add class=”autoHeight” to the iFrame which need to be resized?

Zander Says:
April 27th, 2009 at 11:51 am

I can’t seem to get this to work. I have called both plugins and set the class as you instructed. I am using jQuery v1.3.2..

Here’s my code:

I’m confused.

Zander Says:
April 27th, 2009 at 1:16 pm

Does this only work id the iframed content is from the same domain? I’m trying to embed an AMazon Astore and it doesn’t work.

Antonie Potgieter Says:
April 27th, 2009 at 4:44 pm

Hi there,

Please read the UPDATE I wrote at the bottom of the article. The autoHeight plugin will not work on iFrames accessing content on a different domain since the Window object originating from a different domain than the current one cannot be accessed due to security reasons. If the iFrame content SRC is on the same domain, the autoHeight plugin will work.

Best,
Antonie

Tracy Says:
April 29th, 2009 at 3:35 pm

Thank you Antonie! Got it to work once I double-checked all my directory and file names. This is exactly what I needed. Now I’m going to learn about JQuery.

CLovatfraser Says:
May 1st, 2009 at 12:18 pm

Is there a way to modify this code so that instead of displaying the full content without a scrollbar the iframe will simply resize itself to the space available. I have tried simply using height=”100%” but no such luck. Any help would be greatly appreciated.

hany abbas Says:
May 7th, 2009 at 4:19 am

It works perfectly with FireFox3 and avant 11.x But it did not work with MS IExplorer 8 – The “compatibility view” button must be clicked to work correctly – Please fix this – It is a great plugin But IE8 compatibility is very important.

The iframe located in this page: http://www.graphicawy.com/image_gallery.php

Erik Says:
May 18th, 2009 at 2:42 pm

Thanks, i needed this A LOT:D

Justin Says:
May 24th, 2009 at 4:08 am

Hello,

I have tried installing this and it doesnt seem to work. I installed the files in a sub folder and checked the paths 3 times and its not that.

The IFRAME when it shows up on a page doesnt show the full width and length but instead shows a very tall thin iframe approx 200px in width and scroll bars!

Any idea why this is?

Thanks for the tutorial!

deltoid Says:
June 5th, 2009 at 5:25 am

the original script will find only one iframe on your page. If you have more than one iframe please replace doIframe function with the following one:

function doIframe(){
$(”iframe”).each(function(){
if (/\bautoHeight\b/.test(this.className)){
setHeight(this);
addEvent(this, ‘load’, doIframe);
}
});
}

me Says:
June 8th, 2009 at 7:01 am

1. this is not a jquery plugin

2. this has nothing to do with jquery

3. this does not even work

brYan Says:
June 15th, 2009 at 12:44 pm

Are there ANY ways to replicate this for content on another domain? Possibly reading the height value from the iframe source and then resizing to fit it?

I am working on embedding a catalog from a supplier onto our company site as opposed to just linking to it (their templates are really bland)

Any thoughts?

Olivia Says:
June 16th, 2009 at 8:47 am

Hi there,

You’re code is great and was working perfectly for me until I realized I had to link to https as oppose to http. Is there something in the autoheight.js or jquery.js that I need to change for it to work for this secured server.

I tried embedding the code internally and that still didn’t work.

Any help would be GREATLY appreciated

Thanks!
Olivia

Larry Says:
June 18th, 2009 at 3:30 pm

I just added this to my new XHTML 1.0 Transitional site and it works great. I’m using it to resize my iframe containing my photopost gallery. At first I had a permission problem using a subdomain, but it was easy to fix. I did take a look at the autoHeight code and found it isn’t a jquery plugin (just straight javascript not using the jquery library), but it looks like it would be easy to make it a jq plugin.

Testing Says:
June 22nd, 2009 at 4:19 pm

It worked fine for me in FF, and IE 6-7.

Eric Says:
June 24th, 2009 at 8:16 am

This code doesn’t actually use jquery, but it came in handy for me. Thanks.

Kevin Says:
July 2nd, 2009 at 10:16 am

Thanks a ton.

Joey Says:
July 3rd, 2009 at 8:49 am

Hi
I am trying to fit my wordpress blog inside an iFrame since I want to integrate it with the existing style on my page. This plugin makes it work with one exception – Safari web browser on Mac, On this browser I get the standard scroll window anyway. The other web browsers makes this script work as it should

Any one have a clue what is wrong here?

Rodrigo Miranda Says:
July 8th, 2009 at 8:59 am

Friends anyone know how to make it work with all browsers?

some who is confuse Says:
July 24th, 2009 at 12:10 am

This is not working! And right, this is no jquery at all!

Antonie Potgieter Says:
July 24th, 2009 at 2:31 am

It does work. Just not remotely. Yes, it is not jQuery, you are right.

Guest Says:
August 5th, 2009 at 10:18 am

Thank you!!!!!! What I been looking for, works great for me!!

JRden Says:
August 19th, 2009 at 3:19 am

Thanks Man! I’ve been looking for this solution the whole day!!! Kudos to the big brain of yours!!!

_Salamat!

Mustang Says:
August 22nd, 2009 at 2:01 am

It may be helpful.

function ResizeFrame(name)
{

var fBody = document.frames(name).document.body;
var fName = document.all(name);

fName.style.width
= fBody.scrollWidth + (fBody.offsetWidth – fBody.clientWidth);
fName.style.height
= fBody.scrollHeight + (fBody.offsetHeight – fBody.clientHeight);

// if fail
if (fName.style.height == “0px” || fName.style.width == “0px”)
{
fName.style.width = “700px”;
fName.style.height = “500px”;
}
}

Mustang Says:
August 22nd, 2009 at 2:07 am

name=”myFrame” src=”" width=”650″
scrolling=”no” frameborder=”0″ onLoad=”ResizeFrame(’myFrame’)”

dude Says:
September 3rd, 2009 at 3:42 pm

Hay

Thanks a lot for the code man. Worked coool.

It is having problem with IE8. It can be solved by increasing the offset for IE. I changed it to

function setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 80;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}

Thanks again.. keep it up

Hospedagem de Sites Says:
September 8th, 2009 at 10:10 am

If I remember correctly, this is the script I used to auto-adjust the
size of my iframes :

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Good luck!

Jackie Says:
September 11th, 2009 at 6:10 pm

So, I want to access another domain and iframe it into the page. I know there’s a note it wont work BUT what if I have control over the files in both domains??

For example, I have an application at www.MYAPP.com that I have full control over and want to be able to iframe the app into all of my client’s sites as needed at www.CLIENT1.com, www.CLIENT2.com, www.CLIENT3.com

Is this possible?

David Vasquez Says:
September 17th, 2009 at 10:40 am

(IE8 Fix) This script uses e.contentDocument.body.offsetHeight if present, and falls back on e.contentWindow.document.body.scrollHeight for IE. The issue with IE8 is that is supports contentDocument, however it inaccurately reports e.contentDocument.body.offsetHeight as the height of the iframe window not the document body.

To resolve the IE8 issue and add support for Opera change the setHeight(e) function to:

function setHeight(e){
if (e.Document && e.Document.body.scrollHeight) //ie5+ syntax
e.height = e.contentWindow.document.body.scrollHeight;

else if (e.contentDocument && e.contentDocument.body.scrollHeight) //ns6+ & opera syntax
e.height = e.contentDocument.body.scrollHeight + 35;

else (e.contentDocument && e.contentDocument.body.offsetHeight) //standards compliant syntax – ie8
e.height = e.contentDocument.body.offsetHeight + 35;
}

micha149 Says:
April 22nd, 2009 at 5:36 am
Sorry, but what makes this javascript to jQuery-Plugin? Nothing!
Antonie Potgieter Says:
April 22nd, 2009 at 7:05 am
@micha149

Thank you for your comment. Are you saying that the plugin doesn’t do anything? Like it doesn’t have any effect? Did you add the class name “autoHeight” (case sensitive) to your iFrame? If you show me a URL to your page I can check for you. You might have JavaScript conflicts on your page which terminates execution of your scripts.

Best,
Antonie
Gus Z Says:
April 24th, 2009 at 4:50 pm
Tiis is my code and it doesnt work, can you help me Antonie?

Note: In this page I have 3 iframes, but I need to apply your script on the iframe called “contenido”.

I downloaded autoHeight.js and both jQuery library (jquery-1.3.2.js and jquery-1.3.2.min.js) and these files are on the same folder than the html code file. Im working on my local machine.

Please help me. Thanks!!!

<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i

© 2009 Cultura y Medios

Inicio | Editoriales Columnistas | Noticias | Links | Newsletter | Staff | Contacto
diseño y desarrollo
Antonie Potgieter Says:
April 25th, 2009 at 4:59 am
@Gus Z
Did you add class=”autoHeight” to the iFrame which need to be resized?
Zander Says:
April 27th, 2009 at 11:51 am
I can’t seem to get this to work. I have called both plugins and set the class as you instructed. I am using jQuery v1.3.2..

Here’s my code:

I’m confused.
Zander Says:
April 27th, 2009 at 1:16 pm
Does this only work id the iframed content is from the same domain? I’m trying to embed an AMazon Astore and it doesn’t work.
Antonie Potgieter Says:
April 27th, 2009 at 4:44 pm
Hi there,

Please read the UPDATE I wrote at the bottom of the article. The autoHeight plugin will not work on iFrames accessing content on a different domain since the Window object originating from a different domain than the current one cannot be accessed due to security reasons. If the iFrame content SRC is on the same domain, the autoHeight plugin will work.

Best,
Antonie
Tracy Says:
April 29th, 2009 at 3:35 pm
Thank you Antonie! Got it to work once I double-checked all my directory and file names. This is exactly what I needed. Now I’m going to learn about JQuery.
CLovatfraser Says:
May 1st, 2009 at 12:18 pm
Is there a way to modify this code so that instead of displaying the full content without a scrollbar the iframe will simply resize itself to the space available. I have tried simply using height=”100%” but no such luck. Any help would be greatly appreciated.
hany abbas Says:
May 7th, 2009 at 4:19 am
It works perfectly with FireFox3 and avant 11.x But it did not work with MS IExplorer 8 – The “compatibility view” button must be clicked to work correctly – Please fix this – It is a great plugin But IE8 compatibility is very important.

The iframe located in this page: http://www.graphicawy.com/image_gallery.php
Erik Says:
May 18th, 2009 at 2:42 pm
Thanks, i needed this A LOT:D
Justin Says:
May 24th, 2009 at 4:08 am
Hello,

I have tried installing this and it doesnt seem to work. I installed the files in a sub folder and checked the paths 3 times and its not that.

The IFRAME when it shows up on a page doesnt show the full width and length but instead shows a very tall thin iframe approx 200px in width and scroll bars!

Any idea why this is?

Thanks for the tutorial!
deltoid Says:
June 5th, 2009 at 5:25 am
the original script will find only one iframe on your page. If you have more than one iframe please replace doIframe function with the following one:

function doIframe(){
$(”iframe”).each(function(){
if (/\bautoHeight\b/.test(this.className)){
setHeight(this);
addEvent(this, ‘load’, doIframe);
}
});
}
me Says:
June 8th, 2009 at 7:01 am
1. this is not a jquery plugin

2. this has nothing to do with jquery

3. this does not even work
brYan Says:
June 15th, 2009 at 12:44 pm
Are there ANY ways to replicate this for content on another domain? Possibly reading the height value from the iframe source and then resizing to fit it?

I am working on embedding a catalog from a supplier onto our company site as opposed to just linking to it (their templates are really bland)

Any thoughts?
Olivia Says:
June 16th, 2009 at 8:47 am
Hi there,

You’re code is great and was working perfectly for me until I realized I had to link to https as oppose to http. Is there something in the autoheight.js or jquery.js that I need to change for it to work for this secured server.

I tried embedding the code internally and that still didn’t work.

Any help would be GREATLY appreciated

Thanks!
Olivia
Larry Says:
June 18th, 2009 at 3:30 pm
I just added this to my new XHTML 1.0 Transitional site and it works great. I’m using it to resize my iframe containing my photopost gallery. At first I had a permission problem using a subdomain, but it was easy to fix. I did take a look at the autoHeight code and found it isn’t a jquery plugin (just straight javascript not using the jquery library), but it looks like it would be easy to make it a jq plugin.
Testing Says:
June 22nd, 2009 at 4:19 pm
It worked fine for me in FF, and IE 6-7.
Eric Says:
June 24th, 2009 at 8:16 am
This code doesn’t actually use jquery, but it came in handy for me. Thanks.
Kevin Says:
July 2nd, 2009 at 10:16 am
Thanks a ton.
Joey Says:
July 3rd, 2009 at 8:49 am
Hi
I am trying to fit my wordpress blog inside an iFrame since I want to integrate it with the existing style on my page. This plugin makes it work with one exception – Safari web browser on Mac, On this browser I get the standard scroll window anyway. The other web browsers makes this script work as it should

Any one have a clue what is wrong here?
Rodrigo Miranda Says:
July 8th, 2009 at 8:59 am
Friends anyone know how to make it work with all browsers?
some who is confuse Says:
July 24th, 2009 at 12:10 am
This is not working! And right, this is no jquery at all!
Antonie Potgieter Says:
July 24th, 2009 at 2:31 am
It does work. Just not remotely. Yes, it is not jQuery, you are right.
Guest Says:
August 5th, 2009 at 10:18 am
Thank you!!!!!! What I been looking for, works great for me!!
JRden Says:
August 19th, 2009 at 3:19 am
Thanks Man! I’ve been looking for this solution the whole day!!! Kudos to the big brain of yours!!!

_Salamat!
Mustang Says:
August 22nd, 2009 at 2:01 am
It may be helpful.

function ResizeFrame(name)
{

var fBody = document.frames(name).document.body;
var fName = document.all(name);

fName.style.width
= fBody.scrollWidth + (fBody.offsetWidth – fBody.clientWidth);
fName.style.height
= fBody.scrollHeight + (fBody.offsetHeight – fBody.clientHeight);

// if fail
if (fName.style.height == “0px” || fName.style.width == “0px”)
{
fName.style.width = “700px”;
fName.style.height = “500px”;
}
}
Mustang Says:
August 22nd, 2009 at 2:07 am
name=”myFrame” src=”" width=”650″
scrolling=”no” frameborder=”0″ onLoad=”ResizeFrame(’myFrame’)”
dude Says:
September 3rd, 2009 at 3:42 pm
Hay

Thanks a lot for the code man. Worked coool.

It is having problem with IE8. It can be solved by increasing the offset for IE. I changed it to

function setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 80;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}

Thanks again.. keep it up
Hospedagem de Sites Says:
September 8th, 2009 at 10:10 am
If I remember correctly, this is the script I used to auto-adjust the
size of my iframes :

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Good luck!
Jackie Says:
September 11th, 2009 at 6:10 pm
So, I want to access another domain and iframe it into the page. I know there’s a note it wont work BUT what if I have control over the files in both domains??

For example, I have an application at www.MYAPP.com that I have full control over and want to be able to iframe the app into all of my client’s sites as needed at www.CLIENT1.com, www.CLIENT2.com, www.CLIENT3.com

Is this possible?
David Vasquez Says:
September 17th, 2009 at 10:40 am
(IE8 Fix) This script uses e.contentDocument.body.offsetHeight if present, and falls back on e.contentWindow.document.body.scrollHeight for IE. The issue with IE8 is that is supports contentDocument, however it inaccurately reports e.contentDocument.body.offsetHeight as the height of the iframe window not the document body.

To resolve the IE8 issue and add support for Opera change the setHeight(e) function to:

function setHeight(e){
if (e.Document && e.Document.body.scrollHeight) //ie5+ syntax
e.height = e.contentWindow.document.body.scrollHeight;

else if (e.contentDocument && e.contentDocument.body.scrollHeight) //ns6+ & opera syntax
e.height = e.contentDocument.body.scrollHeight + 35;

else (e.contentDocument && e.contentDocument.body.offsetHeight) //standards compliant syntax – ie8
e.height = e.contentDocument.body.offsetHeight + 35;
}

Lost-In-Code