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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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中使用数组指针函数操作数组示例
2014/11/19 PHP
PHP实现小偷程序实例
2016/10/31 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
详解webpack性能优化——DLL
2017/10/20 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
tensorflow识别自己手写数字
2018/03/14 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
英文留学推荐信范文
2014/01/25 职场文书
文秘个人求职信范文
2014/04/22 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python