IFrame height auto resize

Filed under:  Google about "Javascript"
  • Overview

    Have you ever found the need to display documents behind IFrames? Wondering how the height could be automatically adjusted to the IFrame contents, so it doesn't display scrollbars?

    Well, here's a quick yet effective way to solve this problem by means of a simple javascript file that you just need to add in the header of your pages.

    Note though that the solution presented here will not work for documents located on different domains.

    Ok, let's see...

  • Sample IFrame


    • The IFrame size is computed everytime its content is loaded, but also when the main window is resized. Hopefully, this demo allows you to play with that.
    • It requires javascript, of course, and it has been tested in several browsers (please, see the Compatibility section below).
    • The 3 documents used in the sample use different DOCTYPES. The last one doesn't, so it makes the browser work in quirks mode, where it is much trickier to detect the inner document dimensions.
    • In quirks mode I had to use a couple of workarounds to prevent the resizer from entering an endless loop. This is documented in the code itself.

  • The markup

    You would have to copy the javascript code into a file named (say) dynifs.js and upload it somewhere in your site. Then you have to include the following markup in your pages, say just before the </head> tag. Don't forget to adjust the path to the source here. ;-)

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

    The following snippet would have to be placed anywhere in the document body. This is how you would use DYNIFS for your IFrames:

    <iframe width="100%" height="500"
    id="myiframe" name="myiframe"
    style="width:100%;height:500px;border:1px dotted #BEBEBE;">
    Sorryyour browser doesn't seem to support IFrames!
    • width and height: Actually, any value will do. The width set to 100% would fit the IFrame into the container; the height will be dynamically changed, however it would be good to think about something reasonable for browsers with no javascript support.
    • id and name: You should use a unique value (within the scope of the current document). The same name for both attributes.
    • onload: This is where we call DYNIFS.resize(). It just takes a single argument, the name that we have just set in the id and name attributes. Simple, isn't it?
    • src: This is the URL of the document that will be rendered within the IFrame.
      IMPORTANT: If the IFrame'd document is located on a different domain than the parent window, the javascript will not work! More about cross frame scripting.
    • scrolling="no" is not really necessary, but it may prevent from viewing the scrollbars in certain circumstancies.
    • Anything else? Not really. Well, it depends on what you need. For example, I have used the style attribute here. Too lazy to touch the overall CSS definitions of the site ;-)
  • Cross-scripting between different subdomains

    If you need to let javascript access an IFrame'd document that is located on a different subdomain (not a completely different domain) you can do so by adding the following snippet to both pages (the IFrame container and the IFrame'd document):

    <script type="text/javascript">
    // If the main document is located at www.example.com
    // If the IFrame'd document is located at subdomain.example.com
    // You can do this is both documents! ;-)
    document.domain 'example.com';

    I would like to thank titter for this tip! See this topic for more references. ;-)

  • The code?

    The javascript snippet can be downloaded from its own project page. You can also find the fully commented code on the next page.

  • Compatibility

    DYNIFS should work on any DOM capable browser. It has been successfully tested with MSIE 6, Firefox 1.5 (Windows and Mac), Opera 8.5 (Windows) and Safari 2.0.3 (Thanks, Eldritch ;-). If you are using a different browser, please, let me know whether it works for you too, so I can update the list. ;-)

  • Questions, comments, suggestions?

    Please, use the forums. Thanks ;-)