动态自适应框架IFrame高度

2015/12/0600:47:48 发表评论 2,242

网上找了很多框架自适应高度的代码,由于各方面的原因,没有一个能够达到满意的,最后终于找到一个,贴在这里,备查。动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩。

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

[ccen_js]
<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> 
[/ccen_js]

2、在IFrame的具体页面(就是子页面)的body中,添加onload事件:

[cce_html]<body onload="IFrameResize()">[/cce_html]

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

[cce_html]<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>[/cce_html]

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: