Iframe 自适应高度并实时监控高度变化的js代码


Posted in Javascript onOctober 30, 2009

google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用!
1、首先给出个Iframe。

<iframe id="ifrm" 
marginheight="0" 
marginwidth="0" 
height="100" 
width="1000" 
frameborder="0" 
scrolling="no" 
src="xxxxx.html"> 
</iframe>

2、然后看看怎么获取Iframe中的页面的高度。
其实最麻烦的就是怎么让获取的高度准确,不同的方式不同的浏览器中获取到的值都会不一样!晕啊~~。参考了多方意见得出以下javascript函数(doc参数为window.document对象):
function getDocHeight(doc) 
{ 
//在IE中doc.body.scrollHeight的可信度最高 
//在Firefox中,doc.height就可以了 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight,包含了边框的高度 
if (doc.height) 
{ 
//Firefox支持此属性,IE不支持 
docHei = doc.height; 
} 
else if (doc.body) 
{ 
//在IE中,只有body.scrollHeight是与当前页面的高度一致的, 
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值! 
//似乎跟包含它的窗口的大小变化有关 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement) 
{ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符! 
*/ 
return docHei; 
}

3、最后修改Iframe的高度,并用一个定时器来不间断检查它包含的页面的高度变化。
function doReSize() 
{ 
var iframeWin = window.frames['ifrm']; 
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null; 
if ( iframeEl && iframeWin ) 
{ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
else if(iframeEl) 
{ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
} 
function runResizeTask() 
{ 
doReSize(); 
setTimeout("runResizeTask()",500);//每隔半秒执行一次 
} 
runResizeTask();

在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了!
完整js代码
<script language="javascript" type="text/javascript"> 
function getDocHeight(doc){ 
//在IE中doc.body.scrollHeight的可信度最高 
//在Firefox中,doc.height就可以了 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight,包含了边框的高度 if (doc.height){ 
//Firefox支持此属性,IE不支持 
docHei = doc.height; 
} 
else if (doc.body){ 
//在IE中,只有body.scrollHeight是与当前页面的高度一致的, 
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值! 
//似乎跟包含它的窗口的大小变化有关 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement){ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符! 
*/ 
return docHei; 
} 
function doReSize(){ 
var iframeWin = window.frames['Main']; 
var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: null; 
if ( iframeEl && iframeWin ){ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
else if(iframeEl){ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
} 
function runResizeTask(){ 
doReSize(); 
setTimeout("runResizeTask()",1000);//每隔1秒执行一次 
} 
runResizeTask(); 
</script>
Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 #Javascript
jQuery 扩展对input的一些操作方法
Oct 30 #Javascript
jquery 弹出层实现代码
Oct 30 #Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 #Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 #Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 #Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 #Javascript
You might like
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
相对路径转化成绝对路径
2007/04/10 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
详解PHP中的PDO类
2015/07/06 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python的pycurl包用法简介
2015/11/13 Python
python3 flask实现文件上传功能
2020/03/20 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
大二学期个人自我评价
2014/01/13 职场文书
高二英语教学反思
2014/01/19 职场文书
年度考核评语
2014/01/19 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
金融专业求职信
2014/08/05 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
宇宙与人观后感
2015/06/05 职场文书
卫生主题班会
2015/08/14 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技