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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
js给selected添加options的方法
May 06 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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技术开发技巧分享
2010/03/23 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python支付宝支付示例详解
2019/08/22 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
linux面试题参考答案(6)
2014/08/29 面试题
化工专业应届生求职信
2013/11/08 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
运动员获奖感言
2014/08/15 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server