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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
node使用request请求的方法
Dec 20 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
PHP7内核之Reference详解
2019/03/14 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
优秀学生事迹材料
2014/02/08 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
新文化运动的口号
2014/06/21 职场文书
镇创先争优活动总结
2014/08/28 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis