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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python实现telnet客户端的方法
2015/04/15 Python
python任务调度实例分析
2015/05/19 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
对python中的装包与解包实例详解
2019/08/24 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
weblogic面试题
2016/03/07 面试题
大学校园生活自我鉴定
2014/01/13 职场文书
先进党组织事迹材料
2014/12/26 职场文书
顶岗实习计划书
2015/01/16 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
MySQL数据库简介与基本操作
2022/05/30 MySQL
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL