javascript 装载iframe子页面,自适应高度


Posted in Javascript onMarch 20, 2009

假设主页面有一个div,里面放置一个iframe

<div id="frameBox"> 
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe> 
</div>

3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行

function aa(){ 
var newHeight = document.body.scrollHeight + 20 + "px"; 
window.parent.document.getElementById("frameBox").style.height = newHeight; 
//以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改 
window.parent.document.getElementById("frameWin").style.height = newHeight; 
}

以下方法只需要把代码放在主页面:
页面代码:
<div style="border:1px solid #7e99c6" id="frameBox"> 
<iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe> 
</div>

js脚本(加在主页面):
function test2(){ 
var frameWin = document.getElementById("frameWin"); 
var frameBox = document.getElementById("frameBox"); 
var newHeight; 
if (frameWin.Document){ 
newHeight = frameWin.Document.body.scrollHeight + 20 + "px"; 
}else{ 
newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px"; 
} 
frameWin.style.height = newHeight; 
frameBox.style.height = newHeight; 
}
Javascript 相关文章推荐
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 #Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 #Javascript
for 循环性能比较 提高for循环的效率
Mar 19 #Javascript
js no-repeat写法 背景不重复
Mar 18 #Javascript
javascript 避免闭包引发的问题
Mar 17 #Javascript
用JavaScript编写COM组件的步骤
Mar 17 #Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 #Javascript
You might like
PHP入门速成(2)
2006/10/09 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
web打印小结
2017/01/11 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python读写ini文件的方法
2015/05/28 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
python实现单机五子棋
2020/08/28 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
优秀教师先进事迹
2014/01/22 职场文书
小学生打架检讨书
2014/01/26 职场文书
学习十八大报告感言
2014/02/04 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
个人培训总结
2015/03/05 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
民事辩护词范文
2015/05/21 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书