IFrame document height returns the IFrame height not the real height

Question

I have some javascript inside an iframe that sends the height of the iframe body to the parent page using the three frame technique at Resizing an iframe based on content

The height of the iframes body always seems to come out at 900, the viewport height of the iframe. This is consistent across browsers.

The iframe:

<iframe id="printiq" src="http://myurl.com" height="900px" width="980px">Your browser does not support iframes.</iframe>

The script inside the iframe:

$(window).load(function() {
    var height = document.body.scrollHeight + 60;
    alert('Height: ' + height); //Always returns 900, the height of the iframe
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper';
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>';
    $('body').append(iframe_html);

});

The weird thing is when I inspect the DOM with firebug none of the height variables (scrollHeight, offsetHeight etc) are set to 900.

score 0 · Accepted Answer · answered Jul 07 '10 at 01:35

The problem was a div on the iframed page was expanding to the height of the viewport. I fixed it by changing the css.

Here is the code I ended up with.

Parent window.

function resizeIframe(height) {
    height = parseInt(height) + 60;
    $('iframe#printiq').attr('height', height); 
}

The script for the iframed external site.

 $(window).load(function() {
    var height = $('#container').height() + $('#header').height();
    var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper';
    var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>';
    $('body').append(iframe_html);

});

The iframe helper, which gets embedded into the iframe. A grandchild of the browser window if you like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <!--
    This page is on the same domain as the parent, so can
    communicate with it to order the iframe window resizing
    to fit the content
    -->
    <body onload="parentIframeResize()">
        <style type="text/css">
            body{
                border:none;
                display:none;
            }
        </style>
        <script>
            // Tell the parent iframe what height the iframe needs to be
            function parentIframeResize()
            {
                var height = getParam('height');
                // This works as our parent's parent is on our domain..
                parent.parent.resizeIframe(height);
            }

            function getUrlVars()
            {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }

            // Helper function, parse param from request string
            function getParam( name )
            {

                var results = getUrlVars();
                if( results == null )
                    return "";
                else
                    return results['height'];
            }
        </script>
    </body>
</html>

IFrame document height returns the IFrame height not the real height

1 Answers1