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删除数据记录时的弹出提示效果
May 06 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JavaScript严格模式详解
Jan 16 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
CodeIgniter CLI模式简介
2014/06/17 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Python语言进阶知识点总结
2019/05/28 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python 日志 logging模块详细解析
2020/03/31 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python 检测图片是否有马赛克
2020/12/01 Python
python基于win32api实现键盘输入
2020/12/09 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
大四学生思想汇报
2014/01/13 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
关于学习的决心书
2015/02/05 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android