动态的改变IFrame的高度实现IFrame自动伸展适应高度


Posted in Javascript onDecember 28, 2012

动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩
原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面),添加JavaScript

<script> 
function IFrameResize(){ 
//alert(this.document.body.scrollHeight); //弹出当前页面的高度 
var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象 
//alert(obj.height); //弹出父页面中IFrame中设置的高度 
obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度 
} 
</script>

2、在IFrame的具体页面(就是子页面)的body中,添加onload事件
<body onload="IFrameResize()">

3、为父页面的IFrame标签添加ID,即上面第一步,方法体中的第2行所写到的childFrame
<IFRAME border=0 marginWidth=0 
frameSpacing=0 marginHeight=0 
src="frame1.jsp" frameBorder=0 
noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>

具体实现二:
//动态改变父类iframe的高度 
//iframe页面调用的js 
$(function(){ 
//取到窗口的高度 
var winH = $(window).height(); 
//取到页面的高度 
var bodyH = $(document).height(); 
if(bodyH > winH){ 
window.parent.document.getElementById("mainFrame").height=bodyH; 
}else{ 
window.parent.document.getElementById("mainFrame").height=winH; 
} 
});

父页面的iframe为
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>
Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 #Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 #Javascript
Javascript 加载和执行-性能提高篇
Dec 28 #Javascript
javascript延时加载之defer测试
Dec 28 #Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 #Javascript
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
js实现验证码干扰(动态)
2021/02/23 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python抓取网页中图片并保存到本地
2015/12/01 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python中base64与xml取值结合问题
2019/12/22 Python
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
《我为你骄傲》教学反思
2014/02/20 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
质量保证书格式模板
2015/02/27 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers