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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
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下载生成的csv文件及问题总结
2015/08/06 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
js停止输出代码
2008/07/20 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
nodejs读取并去重excel文件
2018/04/22 NodeJs
angular 组件通信的几种实现方式
2018/07/13 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python如何调用外部系统命令
2019/08/07 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
学校食品安全实施方案
2014/06/14 职场文书
公司合并协议书范本
2014/09/30 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis