Iframe auto-height not working when page changes in IE

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

have you tried to write onload="autoHeight(this)" directly into your iframe-tag (it's ugly, but maybe it helps... long lime ago i wanted to do the same as you try, and i did it this way)? if this doesn't help, i'll search for my old script when i'm at home... can't remember what i've done differently

Answer 2

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.