【转】真正的iframe高度自适应(兼容IE,FF,Opera)

最新推荐文章于 2017-11-13 15:22:47 发布

转载最新推荐文章于 2017-11-13 15:22:47 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JosephLiu/archive/2010/03/07/1680028.html

本文介绍了一个简单的JavaScript函数，用于实现不同浏览器下iframe的高度自适应。该函数能够适配IE、Firefox、Opera等主流浏览器，并解决了因高度计算方式不同导致的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目上的需要，要用一个iframe高度自适应的功能

在google上搜了很久

找到了下面这个js

然后……

进入了测试过程(调用很简单，先略过)

1.IE ---通过但是高度还是有稍微的差距，很小，滚动条还在

2.FF --- 通过与IE一样，有小差距

3.Opera --- 看那个JS的条件就知道，通不过的

但主流浏览器至少要通过这三项撒！！！

于是，还是Google

搜索各浏览器在处理 document.scrollHeight 或者 offsetHeigth时的特殊现象

发现，Opera浏览器在处理iframe内容的时候，用的是contentWindow

而处理内容高度的时候，却与IE一致

从而，有了下面这段js

<html>
<head>
<script>
function SetCwinHeight(obj)
{
  var cwin=obj;
  if (document.getElementById)
  {
    if (cwin && !window.opera)
    {
      if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
        cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS
      else if(cwin.Document && cwin.Document.body.scrollHeight)
        cwin.height = cwin.Document.body.scrollHeight + 10;//IE
    }
    else
    {
        if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
            cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
    }
  }
}
</script>
</head>
<body>
<iframe src="20103622440.html" onload="SetCwinHeight(this);" width="600px">
</body>
</html>

这样一来，总算把这三个浏览器给适应了

做为程序员，还是要细心点

再测试一下

OK...3个浏览器均正常显示，也无iframe的纵向滚动条了

小弟我初次发Blog文

大家莫拍我啊~:)

转载于:https://www.cnblogs.com/JosephLiu/archive/2010/03/07/1680028.html