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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
公众号SVG动画交互实战代码
May 31 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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
大学生就业推荐信范文
2013/11/29 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫