您的位置：首页 > 其它

动态的改变IFrame的高度 .

2012-12-12 14:31 232 查看
动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩

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

具体实现:

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

<script>

/**

* 自动调整IFrame的高度

* @ author Dekn

* @ 2005-11-28

*/

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航