iframe 自适应高度的方法

2012/12/27 9:02:48 出处：本站原创人气：400次字号：小中大

骑自行车的正确

在校大学生该如

每日一囧

动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩

原理：在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度

具体实现:

1、在IFrame的具体页面(就是子页面)，添加JavaScript

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

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>

热门评论