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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
JS立即执行函数功能与用法分析
Jan 15 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
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
党员承诺书内容
2014/03/26 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
村干部任职承诺书
2015/01/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python