编程 Javascript

动态的改变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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Mootools 1.2教程 Tooltips

Sep 15 Javascript

纯js实现无限空间大小的本地存储

Jun 18 Javascript

关于session和cookie的简单理解

Jun 08 Javascript

jQuery延迟执行的实现方法

Dec 21 Javascript

javascript解析ajax返回的xml和json格式数据实例详解

Jan 05 Javascript

微信小程序获取javascript 里的数据

Aug 17 Javascript

微信小程序getPhoneNumber获取用户手机号

Sep 29 Javascript

swiper移动端轮播插件（触碰图片之后停止轮播）

Dec 28 Javascript

JavaScript实现的贝塞尔曲线算法简单示例

Jan 30 Javascript

vue中的数据绑定原理的实现

Jul 02 Javascript

详解如何实现Element树形控件Tree在懒加载模式下的动态更新

Apr 25 Javascript

js+canvas实现两张图片合并成一张图片的方法

Nov 01 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