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和Firefox下event事件杂谈
Dec 18 Javascript
node.js超时timeout详解
Nov 26 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php验证码实现代码(3种)
2015/09/07 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
解决c++调用python中文乱码问题
2020/07/29 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
护士自我介绍信
2014/01/13 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
体育教师求职信
2014/06/30 职场文书
2014年教师节寄语
2014/08/11 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
邀请函格式范文
2015/02/02 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
详解python字符串驻留技术
2021/05/21 Python