Dynamically Resizing an Iframe

Question

I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.

I have tried the proposed solutions in each of the following threads:

• Resize iframe height according to content height in it
• Resizing an iframe based on content

I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.

Here is the code I am using:

    var ifmBlue = document.getElementById("ifmBlue");
    ifmBlue.onload = resizeIframe;

    function resizeIframe()
    {
        var ifmBlue = document.getElementById("ifmBluePill");
        var ifmDiv = ifmBlue.contentDocument.getElementById("main");
        var height = ifmDiv.clientHeight;
        ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height ||  500) + 5 + 'px';
    }

If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.

Any help you can provide is much appreciated.

Thanks,

CJ

Answer 1

DynamicDrive has such a script, which I think does what you're asking for.

There's also a newer version now.

---

2011 update:

I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.

Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.

Answer 2

you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function

another trick, call function after settimeout of 10 msecs

i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it

on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?

Answer 3

By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

From their page:

This is version II of the original Iframe SSI script, which like the original script lets you seamlessly display external content on your page via an IFRAME. It does this by dynamically resizing the IFRAME to be the height of the page contained within it, eliminating any possible IFRAME scrollbars from appearing while snugly showing the entire external content. Think of it as SSI (server side includes) emulated using DHTML! This script works in both IE5+ and NS6+, and for other browsers, supports the option to either completely hide the iframe in question or display it using its default height.

Now, this script differs from the original in that you can load additional documents* into the IFRAME even after the page has loaded, and the IFRAME will dynamically adjust its height to fit the new document. So use this script if you need to not only display external content via the IFRAME tag, but intend to change this content after the page has loaded.