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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
javascript代码加载优化方法
Jan 30 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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 中执行系统外部命令
2006/10/09 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php unlink()函数使用教程
2018/07/12 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
如何提高数据访问速度
2016/12/26 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
年终自我鉴定
2013/10/09 职场文书
区三好学生主要事迹
2014/01/30 职场文书
我的中国梦口号
2014/06/16 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书