首頁 > web前端 > js教程 > javascript動態的改變IFrame的高度實現自動伸展_javascript技巧

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

WBOY
發布: 2016-05-16 17:20:00
原創
1375 人瀏覽過

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



複製程式碼
程式碼如下: 程式碼如下:


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板