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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
在Django的上下文中设置变量的方法
2015/07/20 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Python生成器generator原理及用法解析
2020/07/20 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
利用python绘制正态分布曲线
2021/01/04 Python
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
幼儿园家长评语
2014/02/10 职场文书
党支部季度考核意见
2015/06/02 职场文书
小学教师见习总结
2015/06/23 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
初三语文教学反思
2016/03/03 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
深入理解 Golang 的字符串
2022/05/04 Golang