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?

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

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 Resizing an iframe based on content for scripts on resizing an iframe.

edited May 23 '17 at 10:27

Community

1
1

answered Jun 25 '10 at 20:46

Mikael Svenson

39,181
7
73
79

I thought about this but wasn't sure of the performance impact. I'll give it a shot though! Thanks! – Scott Salyer Jun 25 '10 at 21:07
I tried it and no joy - I think it has to do with the window itself not changing size since it goes off of the clientHeight of the window. Any other suggestions? – Scott Salyer Jun 25 '10 at 21:16
Added some links in my answer. And a timer should work just fine. Maybe with 500ms even. To optimize it you could start the timer every time you get a onmouseleave on the parent frame, and stop it once you get onmouseenter. But not sure if you actually need to performance wise. It could be a premature optimization. – Mikael Svenson Jun 25 '10 at 21:30
The second link with the breakdown looks dead-on what I needed. Thanks! – Scott Salyer Jun 28 '10 at 14:21

iFrame Automatic Sizing

1 Answers1