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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
Javascript中的async awai的用法
May 17 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 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 xml文件操作代码(一)
2009/03/20 PHP
php实现异步数据调用的方法
2015/12/24 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
prototype1.4中文手册
2006/09/22 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
python实现简单中文词频统计示例
2017/11/08 Python
Python如何使用函数做字典的值
2019/11/30 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
网络工程师个人的自我评价范文
2013/10/01 职场文书
打架检讨书100字
2014/01/08 职场文书
《乌塔》教学反思
2014/02/17 职场文书
老同学聚会感言
2014/02/23 职场文书
投标承诺书怎么写
2014/05/24 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android