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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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之可变函数的实例详解
2017/09/13 PHP
stripos函数知识点实例分享
2019/02/11 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
XENON基于JSON变种
2010/07/27 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
layui表格数据重载
2019/07/27 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
Shell编程面试题
2016/05/29 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
房地产推广策划方案
2014/05/19 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
少先队活动总结
2014/08/29 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
常住证明范本
2015/06/23 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书