DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript動態的改變IFrame的高度實現自動伸展
javascript動態的改變IFrame的高度實現自動伸展
編輯:關於JavaScript     
動態的改變IFrame的高度,實現IFrame自動伸展,父頁面也自動神縮
原理: 在IFrame子頁面一加載的時候,調用父IFrame對象,改變其高度
具體實現一:
1、在IFrame的具體頁面(就是子頁面),添加JavaScript
復制代碼 代碼如下:
<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); //彈出當前頁面的高度
var obj = parent.document.getElementById("childFrame"); //取得父頁面IFrame對象
//alert(obj.height); //彈出父頁面中IFrame中設置的高度
obj.height = this.document.body.scrollHeight; //調整父頁面中IFrame的高度為此頁面的高度
}
</script>

2、在IFrame的具體頁面(就是子頁面)的body中,添加onload事件
復制代碼 代碼如下:
<body onload="IFrameResize()">

3、為父頁面的IFrame標簽添加ID,即上面第一步,方法體中的第2行所寫到的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>

具體實現二:
復制代碼 代碼如下:
//動態改變父類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為
復制代碼 代碼如下:
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved