動態的改變IFrame的高度實現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為

複製程式碼

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