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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
如何通过JS实现日历简单算法
Oct 14 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
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
浅析Jquery操作select
2016/12/13 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python制作一个桌面便签软件
2015/08/09 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
阿里云:Aliyun.com
2017/02/15 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
给同学的道歉信
2014/01/16 职场文书
请假条的格式
2014/04/11 职场文书
公司处罚决定书
2015/06/24 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
python实现会员管理系统
2022/03/18 Python