解决火狐iframe自适应高度，兼容IE6、7、8

最新推荐文章于 2023-04-20 20:28:07 发布

转载最新推荐文章于 2023-04-20 20:28:07 发布 · 3k 阅读

文章标签：

#iframe #ie #null #float

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文提供了解决火狐浏览器下iframe标签无法正确自适应高度的代码解决方案，通过在网页body标签前插入自定义脚本，确保iframe内容在不同浏览器下都能完美显示。

做网站最怕就是遇到不兼容问题，有时候在IE下看网页是非常完美的，可在火狐上一看变得一塌糊涂。这不？今天就遇到一个非常麻烦的问题，弄了半天，最终还是弄好了。这个问题是在网页上调用iframe标签的时候不能完全显示所调用页面的高度，只显示一半，在IE下没有问题，火狐就麻烦了。下面是解决代码：

    在网页<body>标签之前插入以下代码：

<script language="javascript">
function turnHeight(iframe)
{
    var frm = document.getElementById(iframe);
    var subWeb = document.frames ? document.frames[iframe].document : frm.contentDocument;
    if(frm != null && subWeb != null)
    { frm.height = subWeb.body.scrollHeight + 20;}
}
</script>

    调用代码如下：

<IFRAME id=iframe1 src="/main/sf.php" frameBorder=0 width="986" scrolling=no onload="turnHeight('iframe1');" height="100%"></IFRAME>

    这样就能解决火狐iframe自适应高度的问题，而且兼容IE。

    注意，iframe页面中的元素，不能使用float属性和display属性，否则在火狐中获取到的iframe高度将为0，导致自适应高度失败。