兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)


Posted in Javascript onNovember 04, 2009

小项目龙里中学多媒体教室管理系统中后台管理用到了iframe.由于要动态载入内容,所以需要iframe自适应内容页的高度.用谷歌搜索到很多答案,其中成功的是这段代码

<script type="text/javascript"> 
function SetCwinHeight() { 
var iframeid = document.getElementById("maincontent1"); //iframe id 
if (document.getElementById) { 
if (iframeid && !window.opera) { 
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { 
iframeid.height = iframeid.contentDocument.body.offsetHeight; 
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) { 
iframeid.height = iframeid.Document.body.scrollHeight; 
} 
} 
} 
} 
</script>

iframe代码:
<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1" 
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>" 
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

在IE8下成功实现自适应高度,但在谷歌浏览器高度只会增加,不会减少,也就是说,长高后就缩不回来.
那么各个浏览器的表现不太相同,单取哪个值都不对。但可以找到了一条规律,那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了:
function reinitIframe(){var iframe = document.getElementById("frame_content"); 
try{ 
var bHeight = iframe.contentWindow.document.body.scrollHeight; 
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
var height = Math.max(bHeight, dHeight); 
iframe.height = height; 
}catch (ex){} 
} 
window.setInterval("reinitIframe()", 200);

这样子,基本解决了兼容性问题。顺便说下,不光绝对定位的层会影响到值,float也会导致两个值的差异。
如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值184,就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生,当从高的页面切换到矮页面的时候,取到的高度还是那个高的值。
可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加 onload=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。
这个值,在实际应用中决定,足够矮但又不能太矮,否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到,只能DOM操作完了之后把高度变小了。
在我的一个实际项目中,在成本和收益之间权衡,我并没有做这个事情,因为每个DOM函数中都要插入这个代码,代价太高,其实层缩回去不缩掉也不是那么致命。包括Demo里,也没有去做这个事情。如果读者有更好的方法,请告诉我。
/**********************************原文引用结束***************************** /
请注意红色的这句.读到这里,我想在改变iframe.height之前可否先给 iframe.height赋一个够小的初始值,如iframe.height="10px",然后再改变如iframe.height.这样就解决了原文红色部分的问题。
最终代码如下:
<script type="text/javascript"> 
function SetCwinHeight() { 
var iframeid = document.getElementById("maincontent1"); //iframe id 
iframeid.height = "10px";//先给一个够小的初值,然后再长高. 
if (document.getElementById) { 
if (iframeid && !window.opera) { 
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { 
iframeid.height = iframeid.contentDocument.body.offsetHeight; 
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) { 
iframeid.height = iframeid.Document.body.scrollHeight; 
} 
} 
} 
} 
</script>

iframe代码仍然不变:
<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1" 
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>" 
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

经测试,iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.
Javascript 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 #Javascript
jQuery 加上最后自己的验证
Nov 04 #Javascript
javascript Math.random()随机数函数
Nov 04 #Javascript
jquery animate 动画效果使用说明
Nov 04 #Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 #Javascript
javascript 限制输入脚本大全
Nov 03 #Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 #Javascript
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
深入学习Python中的装饰器使用
2016/06/20 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python中six模块基础用法
2019/12/08 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
经典演讲稿范文
2013/12/30 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python
redis lua限流算法实现示例
2022/07/15 Redis