建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > html/xhtml >

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

时间:2010-03-07 15:29来源: 作者: 点击:
由于项目上的需要,要用一个iframe高度自适应的功能在google上搜了很久找到了下面这个javascript

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

在google上搜了很久

找到了下面这个javascript

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
      
else if(cwin.Document && cwin.Document.body.scrollHeight)
        cwin.height 
= cwin.Document.body.scrollHeight + 10;
    }
  }
}

然后……

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

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的纵向滚动条了

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片