本文介绍了一种使IFrame在加载时自动调整高度的方法。通过在子页面中使用JavaScript获取自身高度并将其传递给父页面中的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
id="childFrame" marginWidth=0
marginHeight=0
src="frame1.jsp" frameBorder=0
scrolling="no"
width=100% height=100% vspale="0" ></IFRAME>
扫一扫
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
