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入门之基本函数详解
Oct 21 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js实现简单锁屏功能实例
May 27 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php的curl封装类用法实例
2014/11/07 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
layui清除radio的选中状态实例
2019/11/14 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
如何基于Python按行合并两个txt
2020/11/03 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
护士自我介绍信
2014/01/13 职场文书
社区安全检查制度
2014/02/03 职场文书
授权委托书格式模板
2014/04/03 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
居住证明范文
2015/06/17 职场文书
《鲸》教学反思
2016/02/23 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫