动态的改变IFrame的高度实现IFrame自动伸展适应高度


Posted in Javascript onDecember 28, 2012

动态的改变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 相关文章推荐
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
iview同时验证多个表单问题总结
Sep 29 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 #Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 #Javascript
Javascript 加载和执行-性能提高篇
Dec 28 #Javascript
javascript延时加载之defer测试
Dec 28 #Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 #Javascript
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
layui的select联动实现代码
2019/09/28 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python批量修改文件编码格式的方法
2018/05/31 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
浅析python的Lambda表达式
2019/02/27 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python实现大文件分割与合并
2019/07/22 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
中职招生先进个人材料
2014/08/31 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js