iFrame Automatic Sizing

Question

Before the "beating a dead horse" comments begin, let me clarify what I am trying to do to see if someone can help me.

I have a parent window with an iFrame in it. The content in the iFrame is loaded from a separate domain which is where I think my problems begin, although it needs to be this way. When the page originally loads I have the following running:

    <script language="javascript" type="text/javascript">
    var reportFrame = document.getElementById('report');

    function resizeIframe() {
        var height = document.documentElement.clientHeight;

        height -= reportFrame.offsetTop;

        // not sure how to get this dynamically
        height -= 20; /* whatever you set your body bottom margin/padding to be */

        reportFrame.style.height = height + "px";

    }

    reportFrame.onload = resizeIframe;
    window.onresize = resizeIframe;

</script>

This works great. The iFrame doesn't have any scrollbars and looks perfect to how I want. The problem I run into is the iFrame has a button that causes a post-back on the frame. I need to have this script run when the iFrame reloads itself to prevent any scrollbars from showing. Due to the child page being on a separate domain I'm not able to call a function from it to the parent (pretty sure this is where XSS comes into play) so I need to come up with another way for the parent to know it needs to run this script because the iFrame is reloading itself.

Any suggestions?

Answer 1

You could add a timer which checks and resizes at regular intervals:

setInterval( "resizeIframe()", 1000 ); //check every second

[Edit - links for resize scripts]

Check out http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx and http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content for scripts on resizing an iframe.