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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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函数
2006/12/06 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Angular的$http与$location
2016/12/26 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python简单操作excle的方法
2018/09/12 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python能做什么 python的含义
2019/10/12 Python
学习Python列表的基础知识汇总
2020/03/10 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
经典洗发水广告词
2014/03/13 职场文书
市政管理求职信范文
2014/05/07 职场文书
英语复习计划
2015/01/19 职场文书
土建技术员岗位职责
2015/04/11 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
vue判断按钮是否可以点击
2022/04/09 Vue.js
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers