javascript動態的改變IFrame的高度實現自動伸展_javascript技巧

動態的改變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

複製代碼 代碼如下:

具體實現二:

複製程式碼 程式碼如下://動態改變父類iframe的高度//iframe頁面調用的js $(function(){

//取到視窗的高度

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為

複製程式碼

程式碼如下: 程式碼如下: