兼容多浏览器的iframe高度自适应问题

<iframe style="margin:0 auto;padding:0 auto; float:left;" onload="this.height=100" id="frame_content" name="frame_content" src="<{$start_url_html}>" scrolling="no" frameborder="0" width="775" height="900"  allowTransparency="true" style="_773px"></iframe>

<script type="text/javascript">

function reinitIframe(){
   var iframe = document.getElementById("frame_content");
    try{
  var bHeight = iframe.contentWindow.document.body.scrollHeight;
  var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  var height = Math.max(bHeight, dHeight);
  iframe.height =  height +'px';
  if(navigator.appName == "Microsoft Internet Explorer"){
            if(navigator.appVersion.match(/6./i)=='6.'){
                  document.getElementById('mainpart').style.height = height +'px';
            }
  }
    }catch (ex){}
}

window.setInterval("reinitIframe()", 200);

</script>

如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值184,就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生,当从高的页面切换到矮页面的时候,取到的高度还是那个高的值。
可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加 onload=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。

这样子,基本解决了兼容性问题。顺便说下,不光绝对定位的层会影响到值,float也会导致两个值的差异。

原文地址:https://www.cnblogs.com/dearxinli/p/2831977.html