Question

我使用以下代码来增加iframe高度。此代码在Mozilla和IE中运行良好，但在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

在firefox

之外使用document.documentElement.scrollHeight

<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

跨浏览器的方式有点复杂

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

用于增加在Google Chrome中无效的iframe高度的代码

3 个答案: