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 动态访问JSon元素示例代码
Aug 30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
javascript模块化简单解析
Apr 07 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 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
多重?l件?合查?(一)
2006/10/09 PHP
PHP中读写文件实现代码
2011/10/20 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php文件下载处理方法分析
2015/04/22 PHP
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python opencv读mp4视频的实例
2018/12/07 Python
python中比较两个列表的实例方法
2019/07/04 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
对python中各个response的使用说明
2020/03/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python实现学生成绩测评系统
2020/06/22 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
英语教师岗位职责
2014/03/16 职场文书
四下基层实施方案
2014/03/28 职场文书
伏羲庙导游词
2015/02/09 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
vue 实现上传组件
2021/05/31 Vue.js