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


Posted in Javascript onOctober 12, 2013

动态的改变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数组使用调用方法汇总
Dec 08 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 #Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 #Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
5秒后跳转到另一个页面的js代码
Oct 12 #Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 #Javascript
You might like
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
python基础教程之面向对象的一些概念
2014/08/29 Python
python中黄金分割法实现方法
2015/05/06 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
.net工程师笔试题
2012/06/09 面试题
护士自荐信
2013/10/25 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
小学毕业感言150字
2014/02/05 职场文书
《影子》教学反思
2014/02/21 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
法人代表证明书范本
2015/06/18 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
解决 redis 无法远程连接
2022/05/15 Redis
如何基于python实现单目三维重建详解
2022/06/25 Python