对iFrame 自适应高度的解决办法

这两天写了几个页面,布局的时候用到了Iframe,在IE下调试一切正常,不经意间用Firefox打开来看了一下,那效果真是可以用惨不忍睹来形容,Firefox居然不认识高度为100%.

<iframe src="Index.jsp" name="mainFrame" id="mainFrame" frameborder="0" scrolling="auto" style="width:817px;height:100%;"></iframe>

乍一看也没什么不妥,可是火狐就是不认这个height:100%,上Google搜索了一下,找到段脚本,改了改,就解决这个问题了.

思路:首先判断浏览器是IE还是火狐,然后专门针对火狐做单独的样式处理.

<script type="text/javascript">

     function resizeIframe(obj) {

         var Iframe = document.getElementById(obj);

             if (Iframe){

                 if (Iframe.contentDocument){//ff

                     Iframe.style.height = Iframe.contentDocument.body.scrollHeight +60+'px';

                 }

                 else if(Iframe.document && Iframe.document.body.scrollHeight){//ie

                 Iframe.style.height = mainFrame.document.body.scrollHeight + 60 + 'px';

             }

         }

     }

</script>

在Iframe加载的时候就调用这个函数

<iframe src="index.jsp" name="mainFrame" id="mainFrame" onload="resizeIframe('mainFrame')" frameborder="0" scrolling="auto" style="width:817px;height:100%;"></iframe>