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 相关文章推荐
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
jQuery-App输入框实现实时搜索
Nov 19 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
php中的数组操作函数整理
2008/08/18 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
社区春季防火方案
2014/06/02 职场文书
投资意向书
2014/07/30 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
环卫处个人工作总结
2015/03/04 职场文书
入党群众意见范文
2015/06/02 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js