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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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 $_FILES中error返回值详解
2014/01/30 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python编写简单端口扫描器
2019/09/04 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
小学教师培训感言
2014/02/11 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
部门年终奖分配方案
2014/05/07 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
对照检查剖析材料
2014/09/30 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Python中22个万用公式的小结
2021/07/21 Python
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android