动态的改变IFrame的高度

　2012-12-27 13:39:13　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閻忔氨鈧凹鍓熷娲垂椤曞懎鍓伴梺閫炲苯澧紒澶婄秺瀵濡歌閸嬫捇妫冨☉娆忔殘闂佷紮缍€娴滎剟鍩€椤掑倹鏆柛瀣躬瀹曚即寮借閺嗭箓鏌ㄩ悤鍌涘

核心提示：动态的改变IFrame的高度，实现IFrame自动伸展，动态的改变IFrame的高度，父页面也自动神缩原理：在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度具体实现:1、在IFrame的具体页面(就是子页面)，添加JavaScript<script>function IFrameRes

动态的改变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 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>