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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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随机显示图片的简单示例
2014/02/15 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python Queue模块详解
2014/11/30 Python
Python实现简单状态框架的方法
2015/03/19 Python
python写入xml文件的方法
2015/05/08 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
详解python中docx库的安装过程
2019/11/08 Python
wxPython实现分隔窗口
2019/11/19 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Java基础知识面试题
2014/03/25 面试题
Ejb技术面试题
2015/04/29 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
最新自我评价范文
2013/11/16 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
公司委托书格式范文
2014/10/09 职场文书
辞职信如何写
2015/02/27 职场文书