jQuery : Auto iFrame Height

Mon, Apr 20, 2009

JavaScript, Programming, XHTML

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.

<script type="text/javascript" src="jquery.js"></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.

<script type="text/javascript" src="jquery.autoheight.js"></script>

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.

<iframe id="myframe" name="myframe" class="autoHeight" scrolling="auto" frameborder="0" src="http://example.com/iframe.php"></iframe>

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:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • E-mail this story to a friend!
  • LinkedIn
  • Live
  • Ping.fm
  • StumbleUpon
  • Print this article!
  • Reddit
  • TwitThis
, , , , , , , , , , , ,
scriptlancebannerpng

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

  1. micha149 Says:

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

  2. Antonie Potgieter Says:

    @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

  3. Gus Z Says:

    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

  4. Antonie Potgieter Says:

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

  5. Zander Says:

    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.

  6. Zander Says:

    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.

  7. Antonie Potgieter Says:

    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

  8. Tracy Says:

    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.

  9. CLovatfraser Says:

    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.

  10. hany abbas Says:

    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

  11. Erik Says:

    Thanks, i needed this A LOT:D

  12. Justin Says:

    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!

  13. deltoid Says:

    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);
    }
    });
    }

  14. me Says:

    1. this is not a jquery plugin

    2. this has nothing to do with jquery

    3. this does not even work

  15. brYan Says:

    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?

  16. Olivia Says:

    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

  17. Larry Says:

    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.

  18. Testing Says:

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

  19. Eric Says:

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

  20. Kevin Says:

    Thanks a ton.

  21. Joey Says:

    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?

  22. Rodrigo Miranda Says:

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

  23. some who is confuse Says:

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

  24. Antonie Potgieter Says:

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

  25. Guest Says:

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

  26. JRden Says:

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

    _Salamat!

  27. Mustang Says:

    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”;
    }
    }

  28. Mustang Says:

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

  29. dude Says:

    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

  30. Hospedagem de Sites Says:

    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!

  31. Jackie Says:

    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?

  32. David Vasquez Says:

    (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;
    }

Leave a Reply