增加iframe高度的代码在Google Chrome中不起作用

Question

I have used the following code to increase the iframe height. This code working fine in Mozilla and IE, but not in Google Chrome.

<script type="text/javascript">
function calcHeight()
{
    the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
    document.getElementById('the_iframe').height = the_height + 35;
}
</script>    

<iframe src="indexframe.html" id="the_iframe" onLoad="calcHeight();" name="home_frame" width="100%" frameborder="0" ></iframe>

Answer 1

如果您使用的是jQuery

$('#the_iframe').css({'height':(the_height+35)+'px'});

Answer 2

use document.documentElement.scrollHeight in other than firefox

<iframe src="indexframe.html" id="the_iframe" onLoad="calcHeight();" name="home_frame" width="100%" frameborder="0" ></iframe>
<script type="text/javascript">
function calcHeight()
{

  the_height=document.documentElement.scrollHeight;
    document.getElementById('the_iframe').height=the_height+35;


}
</script>  

Answer 3

The cross-browser way is a bit more complicated

<iframe src="indexframe.html" id="the_iframe" name="home_frame" width="100%" frameborder="0" ></iframe>

<script type="text/javascript">
    var iframe = document.getElementById('the_iframe');

    if (iframe.addEventListener) {
        iframe.addEventListener('load', loader, false);
    } else if (iframe.attachEvent) {
        iframe.attachEvent("onload", loader);
    } else {
        iframe.onload = loader
    }

    function loader() {
        var D = iframe.contentDocument ? iframe.contentDocument :
        (iframe.contentWindow ? iframe.contentWindow.document : iframe.document),
        the_height = Math.max(
            D.body.scrollHeight, D.documentElement.scrollHeight,
            D.body.offsetHeight, D.documentElement.offsetHeight,
            D.body.clientHeight, D.documentElement.clientHeight
        );

        iframe.height = the_height+35;
    }   
</script>