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里的条件判断
Feb 27 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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 图片上添加透明度渐变的效果
2009/06/29 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php简单判断文本编码的方法
2015/07/30 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JS类的封装及实现代码
2009/12/02 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
javascript回到顶部特效
2016/07/30 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python中os模块详解
2016/10/14 Python
python简单区块链模拟详解
2019/07/03 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
新员工欢迎词
2014/01/12 职场文书
怎么写自荐书范文
2014/02/12 职场文书
小学生作文评语
2014/04/18 职场文书
个人安全承诺书
2014/05/22 职场文书
运动会拉拉队口号
2014/06/09 职场文书
平面设计师岗位职责
2014/09/18 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
教师聘用意向书
2015/05/11 职场文书
边城读书笔记
2015/06/29 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书