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教程
Jun 09 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
微信小程序合法域名配置方法
May 06 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue数据响应式原理知识点总结
Feb 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP7 list() 函数修改
2021/03/09 PHP
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
layui 给数据表格加序号的方法
2018/08/20 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
初三开学计划书
2014/04/27 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android