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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
setTimeout学习小结
Feb 08 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
扩展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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
pycharm创建一个python包方法图解
2019/04/10 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python线程信号量semaphore使用解析
2019/11/30 Python
Python多线程多进程实例对比解析
2020/03/12 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
送餐员岗位职责范本
2014/02/21 职场文书
网络宣传方案
2014/03/15 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
超市创业计划书
2014/04/24 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
教师业务学习材料
2014/12/16 职场文书
感谢信
2019/04/11 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技