iframe高度適應內容相關問題

iframe高度適應內容

方法一：

<iframe src="#" id="iframe" name="iframe" width="100%"   frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

基於javascript原生的實現：

<script language="javascript">        
if(window.parent.length>0){
window.parent.document.all.iframe.style.height=document.body.scrollHeight;
window.parent.document.all.iframe.style.width=document.body.scrollWidth;} 
</script>

基於Jquery庫的代碼很好實現：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
      $("#iframe").load(function(){ 
      $(this).height(0); //用於每次刷新時控制IFRAME高度初始化 
      var height = $(this).contents().height() + 10; 
      $(this).height( height < 600 ? 600 : height ); 
    }); 
}); 
</script>

這個也可以控制iframe的高度隨內容的多而自動增長

<iframe name="iframe" width="100%" frameborder=0 height="100%" src="#" id="iframe" onload="this.height=iframe.document.body.scrollHeight+20" ></iframe>

方法二：

<div id="iframe">
       <iframe src="#" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="765" height=100% id="iframe" name="iframe" onLoad="iFrameHeight()" ></iframe>
<script type="text/javascript" language="javascript">
    function iFrameHeight() {
        var ifm= document.getElementById("iframe");
        var subWeb = document.frames ? document.frames["iframe"].document :
ifm.contentDocument;
            if(ifm != null && subWeb != null) {
            ifm.height = subWeb.body.scrollHeight;
            }
    }
</script> 
</div>