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 相关文章推荐
JS常用字符串方法(推荐)
Jan 15 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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中操作ini配置文件的方法
2013/04/25 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
python重试装饰器示例
2014/02/11 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Numpy的简单用法小结
2019/08/28 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
大学四年职业生涯规划书范文
2014/01/02 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
英文商务邀请函范文
2015/01/31 职场文书
通知的格式范文
2015/04/27 职场文书
中秋节晚会开场白
2015/05/29 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
PHP获取学生成绩的方法
2021/11/17 PHP