当前位置：首页 > 资讯 > 技术文档

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

时间：2022-11-17 20:10 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript动态的改变IFrame的高度实现自动伸展

动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩原理：在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度 [b]具体实现一:[/b] 1、在IFrame的具体页面(就是子页面)，添加JavaScript

[u]复制代码[/u] 代码如下:

<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事件

[u]复制代码[/u] 代码如下:

3、为父页面的IFrame标签添加ID，即上面第一步，方法体中的第2行所写到的childFrame

[u]复制代码[/u] 代码如下:

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

[b]具体实现二:[/b]

[u]复制代码[/u] 代码如下:

//动态改变父类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为

[u]复制代码[/u] 代码如下:

<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>

全部评论(0)

上一篇：php简单数据库操作类的封装
下一篇：原生js实现shift/ctrl/alt按键的获取

资讯排行榜
更多>>