兼容多浏览器的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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
switchery按钮的使用方法
Dec 18 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
vuejs移动端实现div拖拽移动
Jul 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
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
解决vue-router中的query动态传参问题
2018/03/20 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
通过源码分析Python中的切片赋值
2017/05/08 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python2 对excel表格操作完整示例
2020/02/23 Python
如何用python批量调整视频声音
2020/12/22 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
工厂会计员职责
2014/02/06 职场文书
职工运动会感言
2014/02/07 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
白酒代理协议书范本
2014/10/26 职场文书
慈善募捐倡议书
2015/04/27 职场文书
小学体育组工作总结
2015/08/13 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS