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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
JS与框架页的操作代码
Jan 17 Javascript
JS 表单验证大全
Nov 23 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php表单处理操作
2017/11/16 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python的schedule定时任务模块二次封装方法
2019/02/19 Python
对Python函数设计规范详解
2019/07/19 Python
python基础教程之while循环
2019/08/14 Python
python英语单词测试小程序代码实例
2019/09/09 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
保护野生动物倡议书
2014/05/16 职场文书
五好家庭事迹材料
2014/12/20 职场文书