利用JAVASCRIPT讓IFRAME框架的高度自適應

頁面內嵌不同的網頁內容時,導致iframe的高度無法與實現內容或浏覽器高度相匹配。窗口大小變換時,不能iframe不能進行自動調整。這裏,我們利用JAVASCRIPT讓IFRAME框架的高度自適應。

首先,寫出如下的JS方法。

/**

* 內嵌頁面的高度設置

*/

function handleFrameLoad() {

var hDoc = getBodyHeight(document);

var tblmain = document.getElementById('tblMain');

var mFrame = window.mainFrame;

var hFrameDoc = getFrameHeight(mFrame);

var hTable = hDoc-80; //減去該頁面除iframe外其他控件所占的高度.

if(hFrameDoc > hTable) hTable = hFrameDoc;

tblmain.style.height = hTable;

mFrame.height = hTable;

if(window.mainFrame.moduleRight != null){

//表示該內嵌頁,包含內嵌的頁面,頁iframe的id固定爲moduleRight。

initFrameHeight(mFrame,hTable);

}

}

/**

* 獲取當前頁面的高度

*/

function getBodyHeight(doc){

if(doc.all) return doc.body.offsetHeight;

else return doc.body.scrollHeight;

}

/**

* 獲取內嵌頁中的高度.

* 若另含子內嵌(moduleRight)頁時,應考慮該頁面的高度.

*/

function getFrameHeight(mFrame){

var h1 = mFrame.document.body.offsetHeight;

var h2 = mFrame.document.body.scrollHeight;

if(mFrame.moduleRight != null){

var h3 = mFrame.moduleRight.document.body.scrollHeight;

if(h3 > h2) h2 = h3;

}

return h2;

}

/**

* 設置子內嵌頁面的高度.

* 通過設置iframe所在table的高度來調整。

*/

function initFrameHeight(frame,hFrame){

var tbl = frame.document.getElementById('tblMainFrame');

tbl.style.height = hFrame;

}

主頁面,在加載完畢(onload)、窗口大小調整(onresize),以及iframe的加載完畢時,需調用:handleFrameLoad,代碼如下:

<html>

<body onload="handleFrameLoad();" onResize="handleFrameLoad();">

<iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/>

</body>

</html

其他內嵌頁如下(注:此處的iframe高度設爲100%,其高度由父頁面通過設置table<tblMainFrame>的高度來進行調整):

<html>

<body class="body" style="overflow:hidden;margin:0px;padding:0px">

<table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td id='content' height=100%>

<iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/>

</td>

</tr>

</table>

</body>

</html>

關于IFRAME 自適應高度的研究
代碼如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4....查看完整版>>關于IFRAME 自適應高度的研究
 
關于IFRAME 自適應高度的研究
  代碼如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" co...查看完整版>>關于IFRAME 自適應高度的研究
 
用javascript動態調整iframe高度
當你在頁面上使用了iframe之後,一般來說會不希望iframe顯示難看的滾動條,以使iframe裏面的內容和主頁面的內容渾然一體。這時候你會設置 scrolling="no" 屬性。但是這樣一來如果iframe裏面的內容是變化的...查看完整版>>用javascript動態調整iframe高度
 
用javascript動態調整iframe高度
首先,在你的主頁面上必須包含以下這段javascript代碼:<script language="Javascript">var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")//extra height in px ...查看完整版>>用javascript動態調整iframe高度
 
Iframe框架高度自適應的實現
  解決iframe框架頁面自適應高度問題代碼如下,需要注意的是框架引用頁面一定要設置name屬性,否則會不生效  方案一:<iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj...查看完整版>>Iframe框架高度自適應的實現
 
JavaScript應用:Iframe自適應其加載的內容高度
main.htm:<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <meta name='author' content='F.R.Huang(meizz梅花雪)//www.meiz...查看完整版>>JavaScript應用:Iframe自適應其加載的內容高度
 
如何實現iframe(嵌入式幀)的自適應高度
  好幾次看到有人提問問到如何實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象,剛好我在工作中也碰到了類似問題,于是上網翻查,東抄抄西看看,弄出來這麽一個...查看完整版>>如何實現iframe(嵌入式幀)的自適應高度
 
如何實現iframe(嵌入式幀)的自適應高度
好幾次看到有人提問問到如何實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象,剛好我在工作中也碰到了類似問題,于是上網翻查,東抄抄西看看,弄出來這麽一個函數...查看完整版>>如何實現iframe(嵌入式幀)的自適應高度
 
如何實現iframe(嵌入式幀)的自適應高度
  好幾次看到有人提問問到如何實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象,剛好我在工作中也碰到了類似問題,于是上網翻查,東抄抄西看看,弄出來這麽一個...查看完整版>>如何實現iframe(嵌入式幀)的自適應高度
 
 
回到王朝網路移動版首頁