增加iframe高度的代碼無法在Google Chrome中工作

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

使用document.documentElement.scrollHeight在其他比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

的跨瀏覽器的方式是一個比較複雜的

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