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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
浅谈php和.net的区别
2014/09/28 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
python的构建工具setup.py的方法使用示例
2017/10/23 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
区长工作作风个人整改措施
2014/10/01 职场文书
五年级上册复习计划
2015/01/19 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
golang 如何通过反射创建新对象
2021/04/28 Golang
DE1103使用报告
2022/04/05 无线电