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)
Oct 31 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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
解析csv数据导入mysql的方法
2013/07/01 PHP
php生成shtml类用法实例
2014/12/09 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
深入理解javascript变量声明
2014/11/20 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
python操作oracle的完整教程分享
2018/01/30 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
单位创先争优活动方案
2014/01/26 职场文书
机关节能减排实施方案
2014/03/17 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
高中学生自我评价范文
2014/09/23 职场文书
大四学生个人总结
2015/02/15 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
pytorch实现ResNet结构的实例代码
2021/05/17 Python
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python