Question

I have an iframe in a page, with the following auto-height script.

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

document.domain = "example.co.uk";
var ifr = document.getElementById('housingdata');

ifr.onload = function() {
    autoHeight(ifr);
}

The iframe resizes fine when the outer page is loaded, but when I go to a new page in the iframe, scrollbars appear and the page does not get resized in Internet Explorer. In other browsers the iframe gets resized, because the onload event fires each time.

I’m using IE8 but the outer page is setting it to IE7 compatibility mode. Is there a workaround for IE?

Answer 1

I found a different way to implement this. I removed the above script and put the script below (with the autoHeight function) on the iframe page itself:

window.onload = function() {
    var ifr = window.parent.document.getElementById('housingdata');
    autoHeight(ifr);
}

Now, every time the page loads, the iframe is resized.