编程 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 相关文章推荐

javascript语句中的CDATA标签的意义

May 09 Javascript

JavaScript 模仿vbs中的 DateAdd() 函数的代码

Aug 13 Javascript

JS 常用校验函数

Mar 26 Javascript

select、radio表单回显功能实现避免使用jquery载入赋值

Jun 08 Javascript

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

Dec 10 Javascript

jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

Jun 12 Javascript

详解vue.js移动端导航navigationbar的封装

Jul 05 Javascript

微信小程序使用video组件播放视频功能示例【附源码下载】

Dec 08 Javascript

使用live-server快速搭建本地服务器+自动刷新的方法

Mar 09 Javascript

超出JavaScript安全整数限制的数字计算BigInt详解

Jun 24 Javascript

用vue-cli开发vue时的代理设置方法

Sep 20 Javascript

原生javascript制作贪吃蛇小游戏的方法分析

Feb 26 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