iframe 自適應(yīng)高度的方法

2012/12/27 9:02:48 出處：本站原創(chuàng) 人氣：400次字號(hào)：小中大

每日一囧

動(dòng)態(tài)的改變IFrame的高度，實(shí)現(xiàn)IFrame自動(dòng)伸展，父頁(yè)面也自動(dòng)神縮

原理：在IFrame子頁(yè)面一加載的時(shí)候，調(diào)用父IFrame對(duì)象，改變其高度

具體實(shí)現(xiàn):

1、在IFrame的具體頁(yè)面(就是子頁(yè)面)，添加JavaScript

function IFrameResize(){

//alert(this.document.body.scrollHeight); //彈出當(dāng)前頁(yè)面的高度

var obj = parent.document.getElementById("childFrame"); //取得父頁(yè)面IFrame對(duì)象

//alert(obj.height); //彈出父頁(yè)面中IFrame中設(shè)置的高度

obj.height = this.document.body.scrollHeight; //調(diào)整父頁(yè)面中IFrame的高度為此頁(yè)面的高度

}

</script>

2、在IFrame的具體頁(yè)面(就是子頁(yè)面)的body中，添加onload事件

3、為父頁(yè)面的IFrame標(biāo)簽添加ID，即上面第一步，方法體中的第2行所寫(xiě)到的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>