ansaurus

Question

IFrame document height returns the IFrame height not the real height

Answer 1

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <!--
    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>

Keyo 2010-07-07 01:35:46

ansaurus

tags:

views:

answers:

IFrame document height returns the IFrame height not the real height

related questions