Question

I have a page with an iframe. The iframe contents sometimes do dynamic JS things that cause them to grow. When thta happens, I have to resize the iframe to make sure it’s long enough, which I do with this, inside the iframe:

// I saved you the boredom of all the try{}s and != nulls, this is just the meat.
document.parentWindow.parent.reSize();

And this, which is in the parent html:

function reSize()
{
    try
    {
        var oBody   =   ifrm.document.body;
        var oFrame  =   document.all('ifrm');

        oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight) + 100;
    }
    //An error is raised if the IFrame domain != its container's domain
    catch(e) { }
}

However, calls to this are littered all over, in every place where resizing might have happened. Is there anywhere I can put this such that it is “automatic”? Some event I can trigger off of or something?

Relevant links:

• How do I detect iframe resize?
• resize iframe dynamically in ASP
• how to detect iframe resize?

Answer 1

This code seems to be working, on Firefox, Chrome 16, and IE 8, at least. It is derived from @TimWickstrom.com’s answer, but with the outer-frame stuff removed and some modifications to height calculations:

<iframe id='ifrm' width='100%' scrolling='no' ...>

var iFrame = document.getElementById('ifrm'); 
function stateChange(){ if (obj.readyState=='loading') { scroll(0,0); } }
iFrame.onreadystatechange='stateChange()';
var iFrameHeight = -1;
function resizeIframe() {
    var iFrameBody = typeof iFrame.contentDocument != 'undefined' ? iFrame.contentDocument.body : iFrame.contentWindow.document.body;
    if (iFrameBody == null) return;
    var newiFrameHeight = typeof window.innerHeight != 'undefined' ? iFrameBody.scrollHeight : (iFrameBody.scrollHeight + iFrameBody.offsetHeight - iFrameBody.clientHeight);
    if(iFrameHeight != newiFrameHeight) {
        iFrameHeight = newiFrameHeight;
        iFrame.style.height = newiFrameHeight;
    }
}
iFrame.onload = function() { setInterval('resizeIframe()', 100); }