動態的改變IFrame的高度,實作IFrame自動伸展,父頁也自動神縮
原理: 在IFrame子頁面一載入的時候,呼叫父IFrame對象,改變其高度
具體實現一:
1、在IFrame的具體頁(就是子頁),加上JavaScript
<script> <BR>function IFrameResize(){ <BR>//alert(this.document.body.scrollHeight); //彈出目前頁面的高度<BR>var obj = parent .document.getElementById("childFrame"); //取得父頁IFrame物件<BR>//alert(obj.height); //彈出父頁中IFrame中設定的高度<BR>obj.height = this.document .body.scrollHeight; //調整父頁中IFrame的高度為此頁面的高度<BR>} <BR></script>
2、在IFrame的具體頁面(就是子頁面)的body中,加入onload事件
3、為父頁的IFrame標籤添加ID,即上面第一步,方法體中的第2行所寫到的childFrame
具體實現二:
//取到視窗的高度
var winH = $(window). height();
//取到頁面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById( "mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});
父親頁的iframe為
複製程式碼