兼容多浏览器的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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
详解vue路由
Aug 05 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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中相同前缀的数据表的代码
2011/07/01 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
python 排列组合之itertools
2013/03/20 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
基于PyTorch中view的用法说明
2021/03/03 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
中秋寄语大全
2014/04/11 职场文书
安全月活动总结
2014/05/05 职场文书
中文专业求职信
2014/06/20 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
大学毕业生个人总结
2015/02/28 职场文书
刑事撤诉申请书
2015/05/18 职场文书