兼容多浏览器的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="_width: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也会导致两个值的差异。