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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
js进行表单验证实例分析
Feb 10 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JS随机数产生代码分享
Feb 24 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
javascript随机变色实例代码
Oct 15 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
车辆安全检查制度
2014/01/12 职场文书
万年牢教学反思
2014/02/15 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
应届生面试求职信
2014/07/02 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
基层党支部整改方案
2014/10/25 职场文书
联欢会开场白
2015/06/01 职场文书
大国崛起观后感
2015/06/02 职场文书
体育教师研修感悟
2015/11/18 职场文书
实验心得体会范文
2016/01/25 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
如何使用php生成zip压缩包
2021/04/21 PHP
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python