js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
更新时间：2010年03月07日 12:15:07 作者：
由于项目上的需要，要用一个iframe高度自适应的功能，在google上搜了很久，找了一些修改了下。大家可以测试下。
找到了下面这个js
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的纵向滚动条了
复制代码 代码如下:
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的纵向滚动条了
相关文章
解构就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应，并将变量相对应元素进行赋值。本文将详细介绍ECMAScript6--解构的相关知识。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript Ajax编程之应用篇，感兴趣的朋友可以参考一下2016-07-07
在js中如果打算使用setInterval进行倒数,计时等功能，往往是不准确的，针对这个问题，本文有个不错的解决方案2014-05-05
这篇文章主要介绍了用js编写的简单的计算器代码程序，非常具有实用性,感兴趣的小伙伴可以参考下2015-08-08
遇到一个Js从Cookies里面取值的需求，Js貌似没有现成的方法可以指定Key值获取Cookie里面对应的值，简单实现如下2014-06-06
这篇文章主要介绍了js实现带按钮的上下滚动效果,设计javascript鼠标事件及页面元素样式的相关操作技巧,需要的朋友可以参考下2015-05-05
有本经典的书叫《设计模式》，讲了经典的21种设计模式，建议大家都看看2013-11-11
在JS中使用fetch更加高效地进行网络请求,下面这篇文章主要给大家介绍了关于JS中fetch()用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
在js中处理Date时,发现Safari和其他浏览器的支持方式不一致。下面通过本文给大家分享js中Safari浏览器中的Date，感兴趣的朋友一起学习吧2017-07-07
可以针对校验状态为输入框添加额外的图标。接下来通过本文给大家分享bootstrap中添加额外的图标实例代码，需要的的朋友参考下吧2017-02-02
最新评论