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 相关文章推荐
js 小数取整的函数
May 10 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
几种tab切换详解
2017/02/03 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python中模块string.py详解
2017/03/12 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python实现图片九宫格分割
2021/03/07 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
yy结婚证婚词
2014/01/10 职场文书
高一新生军训感言
2014/03/02 职场文书
给公司的建议书范文
2014/05/13 职场文书
2015年端午节活动总结
2015/02/11 职场文书
合作与交流自我评价
2015/03/09 职场文书
2015年团支书工作总结
2015/04/03 职场文书
采购员岗位职责范本
2015/04/07 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书