How do I trigger an event whenever an HTML page gets longer?

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:

Are you using jQuery/would you like vanilla JS-only solutions? — Matt Ball, Dec 07 '11 at 20:16

Tim Wickstrom · Answer 1 · 2011-12-07T21:37:01.167

Place this code right above the closing body tag of the parent window. place your iframe resizing code where commented.

OLD CODE:

<script>
    var intWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

    var resizeIframe = function() {
        var newWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
        if(newWinHeight != intWinHeight) {
            intWinHeight = newWinHeight;
            // execute your Iframe resizing code here

        }
    }
    setInterval(resizeIframe, 100);
</script>

NEW CODE:

<script type="text/javascript">

    var iFrameId = document.getElementById('myIframe');
    var intWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
    var intIframHeight = (typeof iFrameId.contentWindow.window.innerHeight != 'undefined' ? iFrameId.contentWindow.window.innerHeight : iFrameId.contentWindow.document.body.offsetHeight);
    function exeResizeIframe() {
        var newWinHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
        var newIframHeight = (typeof iFrameId.contentWindow.window.innerHeight != 'undefined' ? iFrameId.contentWindow.window.innerHeight : iFrameId.contentWindow.document.body.offsetHeight);
        if((newWinHeight != intWinHeight) || intIframHeight != newIframHeight) {
            intWinHeight = newWinHeight;
            intIframHeight = newIframHeight;
            // execute your Iframe resizing code here

        }
    }
    setInterval("exeResizeIframe()", 100);
</script>

Please note, change the iframe ID due to security restrictions in IE < 9 only local paths will work in the ifram src

If I understand right, this code will only trigger the "Iframe resizing code" when the browser window itself resizes, yes? I need to to trigger when the contents of the iframe dynamically resizes itself, not (only) when the browser changes size. — Scott Stafford, Dec 07 '11 at 21:00
+1 because I got quite a bit of use out of this - thanks - but polished it a little more and posted that in an answer. — Scott Stafford, Dec 08 '11 at 03:08

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

You can trigger a custom event after doing the "dynamic JS things." Elsewhere, attach just a single listener whose callback executes the document.parentWindow.parent.reSize();.

Further reading:

edited May 23 '17 at 12:18

Community

1
1

answered Dec 07 '11 at 20:05

Matt Ball

354,903
100
647
710

score 0 · Answer 3 · answered Dec 07 '11 at 20:13

0

Maybe bind an event in parent window that resizes the iframe and trigger it whenever the dynamic js causes it to grow (trigger it from the iframe content. look at this post: http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

answered Dec 07 '11 at 20:13

A.B.Cade

16,735
1
37
53

score 0 · Accepted Answer · answered Dec 08 '11 at 03:07

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); }

How do I trigger an event whenever an HTML page gets longer?

4 Answers4