对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>