0

I have an iframe that I would like to resize to match its contents whenever the contents auto refreshes (every few minutes) or when the user interacts with it. Although the contents are in the same domain, it would be difficult for me to modify the contents. Ideally, the iframe would just self adjust to the size of its contents.

Current code that resizes only once:

<iframe id="ganglia-frame" src="ganglia.url" width="100%" height="500%">
    blah not supported blah
</iframe>

<script language="Javascript">
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow ||
                    iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height =
                        iframeWin.document.documentElement.scrollHeight ||
                        iframeWin.document.body.scrollHeight;
            }
        }
    }

    $(window).load(function () {
        setIframeHeight(document.getElementById('ganglia-frame'));
    });
</script>

Related question: Adjust width height of iframe to fit with content in it

Community
  • 1
  • 1
walrii
  • 3,472
  • 2
  • 28
  • 47
  • Did you take a look at http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content, pretty comprehensive! – Dane Balia Aug 22 '12 at 22:13
  • @DaneBalia if you are referring to the accepted answer, it requires modifying the iframe content code (see 2nd paragraph), which I can't do. – walrii Aug 22 '12 at 22:46

2 Answers2

0

What you need to do is to set a timer and check the iFrame size after a few moments. You may have to check several times as not all browsers return the correct size immediately.

This method works only on same-domain iFrames.

Bind a function to the iFrame onload event and when it executes check the height of the iFrame. If no height is found schedule another check in a few moments.

var iFrameSizeCount = 0;
var onloadFunction = function(event){
    var contentHeight = document.getElementById('iFrameId').contentWindow.document.body.offsetHeight;

    if(contentHeight == 0){
         // Schedule a recheck in a few moments
         iFrameSizeCount++; // we keep a count of how many times we loop just in case
         if(iFrameSizeCount  < 10){ // after a while we have to stop checking and call it a fail
             setTimeout(function(){ onloadFunction(event); }, 200);
             return false;
         }
         else {
              contentHeight  = 100; // eventually if the check fails, default to a fixed height. You could possibly turn scrolling to auto/yes here to give the iFrame scrollbars.
         }
     }
    contentHeight += 30; // add some extra padding (some browsers give a height that's slightly too short)

    document.getElementById('iFrameId').style.height = contentHeight + 'px';
}

Then bind the event to the onload event of your iFrame (however you want to):

The "scrolling=auto" is useful, just in case the sizing fails at least they have scrollbars. The onload event fires if the iFrame reloads, so is useful if they've clicked a link inside it.

temporalslide
  • 957
  • 6
  • 9
  • Rather than getting the body, get the documentElement and it's margins: document.documentElement.offsetHeight + ~~window.getComputedStyle(document.documentElement).marginTop.slice(0,-2) + ~~window.getComputedStyle(document.documentElement).marginBottom.slice(0,-2); where document and window are actually contentWindow and contentWindow.document – Paul S. Aug 23 '12 at 00:06
0

I have had good luck with this jQuery plugin - https://github.com/davidjbradshaw/iframe-resizer

bchesley
  • 151
  • 1
  • 3
  • 8
  • I have looked at Bradshaw's iFrame Resizer but couldn't get it to work... in fact in Chrome (locally) his test example did not even work for me – marcnyc Jun 10 '16 at 16:24