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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 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
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
在django view中给form传入参数的例子
2019/07/19 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
梅西百货官网:Macy’s
2020/08/04 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
市场开发计划书
2014/05/07 职场文书
关于读书的活动方案
2014/08/14 职场文书
催款函范本大全
2015/06/24 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
2016中秋节广告语
2016/01/28 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers