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>