动态的改变IFrame的高度实现IFrame自动伸展适应高度
更新时间：2012年12月28日 14:25:35 作者：
动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度
动态的改变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编写一个酷炫的3D图片演示效果，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了检测一个函数是否是JavaScript原生函数的小技巧,本文给出了两种检测方法,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有Content-Disposition的下载,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
JS中call/apply、arguments、undefined/null方法详解
这篇文章主要介绍了JS中call/apply、arguments、undefined/null方法详解的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要给大家介绍了关于JS数组索引检测中的数据类型问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家详细介绍了Bootstrap Modal对话框如何在关闭时触发事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了微信小程序自定义导航隐藏和显示功能,需要的朋友可以参考下2017-06-06
正则表达式是javascript操作字符串的一个重要组成部分，然而，在ES6中，随着字符串操作的变更， ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展2017-07-07
js中常常用到innerHTML,其作用就是获取到标签里面的内容,同时也可以为标签添加内容,下面这篇文章主要给大家介绍了关于JavaScript中innerHTML使用方法的相关资料,需要的朋友可以参考下2022-10-10
单例模式（Singleton Pattern）是一种创建型设计模式,确保一个类只有一个实例,并提供全局访问该实例的方式,这在某些场景下非常有用,例如配置管理类、日志类或数据库连接管理类,需要的朋友可以参考下2024-08-08
最新评论