Question

我在iframe中有一些javascript，它使用Resizing an iframe based on content处的三帧技术将iframe主体的高度发送到父页面

iframes身体的高度似乎总是出现在900，即iframe的视口高度。这在浏览器中是一致的。

iframe：

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

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);

}）;

奇怪的是当我用firebug检查DOM时，没有任何高度变量（scrollHeight，offsetHeight等）被设置为900.

Answer 1

问题是iframed页面上的div正在扩展到视口的高度。我通过更改css来修复它。

这是我最终得到的代码。

父窗口。

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

iframed外部网站的脚本。

 $(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);

}）;

iframe帮助器，嵌入到iframe中。浏览器窗口的孙子，如果你愿意的话。

<!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文档高度返回IFrame高度而不是实际高度

1 个答案: