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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php微信开发之谷歌测距
2018/06/14 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python之django母板页面的使用
2018/07/03 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
秋游活动策划方案
2014/02/16 职场文书
中秋晚会活动方案
2014/08/31 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2014年实习生工作总结
2014/11/27 职场文书
英文产品推荐信
2015/03/27 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书