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


Posted in Javascript onMarch 07, 2010

找到了下面这个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的纵向滚动条了
Javascript 相关文章推荐
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
AngularJS实现动态添加Option的方法
May 17 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 #Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 #Javascript
javascript下判断一个元素是否存在的代码
Mar 05 #Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 #Javascript
js 获取服务器控件值的代码
Mar 05 #Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 #Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
10个php函数实用却不常见
2015/10/13 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python爬虫增加访问量的方法
2019/08/22 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
总监职责范文
2013/11/09 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
《草原》教学反思
2014/02/15 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
MySQL优化及索引解析
2022/03/17 MySQL