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 相关文章推荐
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
扩展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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Django使用rest_framework写出API
2020/05/21 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
岗位职责范本
2013/11/23 职场文书
管理建议书范文
2014/05/13 职场文书
校园演讲稿汇总
2014/05/21 职场文书
企业晚会策划方案
2014/05/29 职场文书
医院节能减排方案
2014/06/13 职场文书
收入证明怎么写
2015/06/12 职场文书
培训感想范文
2015/08/07 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫