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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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生成随机用户名和密码的实现代码
2013/02/27 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP递归算法的简单实例
2019/02/28 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python中Django 后台自定义表单控件
2017/03/28 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
python 模块导入问题汇总
2021/02/01 Python
应届生高等护理求职信
2013/10/12 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
法人委托书的范本格式
2014/09/11 职场文书
个人先进事迹材料
2014/12/29 职场文书
2014年个人年终总结
2015/03/09 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python