Detect iframe content height change

Question

There are plenty of examples showing how to dynamically set an iframe's height to its content. This works perfect for me. The problem I'm now having is that the content can change size without triggering onload (think hidden/expandable divs).

Is there any way to detect when the size of the iframe content has changed? This is on the same domain and no jQuery, please.

Answer 1

I would do this by polling regularly (maybe every 200 milliseconds, perhaps more often) using setInterval. You could then compare the size of the content to what it was last time.

var iframe = document.getElementById('myIframe'),
    lastheight;

setInterval(function(){
    if (iframe.document.body.scrollheight != lastheight) {
        // adjust the iframe's size

        lastheight = iframe.document.body.scrollheight;
    }
}, 200);