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 相关文章推荐
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
简单实现js放大镜效果
Jul 24 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
实例讲解JavaScript 计时事件
Jul 04 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
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PDO::errorCode讲解
2019/01/28 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python将list转为matrix的方法
2018/12/12 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python如何读取bin文件并下发串口
2019/07/05 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python 读取二进制 显示图片案例
2020/04/24 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
模范教师事迹材料
2014/02/10 职场文书
大学生求职信范文
2014/05/24 职场文书
政风行风建设整改方案
2014/10/27 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
总结会主持词
2015/07/02 职场文书
热爱劳动主题班会
2015/08/14 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
民事调解协议书
2016/03/21 职场文书
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers