1、目的
系統(tǒng)通過(guò)一內(nèi)嵌頁(yè)面(iframe)
來(lái)展現(xiàn)網(wǎng)頁(yè)內(nèi)容（也包括內(nèi)嵌頁(yè)中再嵌一個(gè)網(wǎng)頁(yè)），這將會(huì)引起如下幾個(gè)問(wèn)題：
a.不同的網(wǎng)頁(yè)內(nèi)容多少不一致，導(dǎo)致iframe的高度無(wú)法與實(shí)現(xiàn)內(nèi)容或?yàn)g覽器高度相匹配。
b.窗口縮放時(shí)，不能iframe不能進(jìn)行自動(dòng)調(diào)整。
針對(duì)這兩個(gè)問(wèn)題，寫(xiě)了一些js方法，使iframe自動(dòng)適應(yīng)內(nèi)容或?yàn)g覽器高度。
2、js代碼
在主框回頁(yè)面中包括如下js方法:
/**
* 內(nèi)嵌頁(yè)面的高度設(shè)置
*/
function handleFrameLoad() {
var hDoc = getBodyHeight(document);
var tblmain = document.getElementById('tblMain');
var mFrame = window.mainFrame;
var hFrameDoc = getFrameHeight(mFrame);
var hTable = hDoc-80; //減去該頁(yè)面除iframe外其他控件所占的高度.
if(hFrameDoc > hTable) hTable = hFrameDoc;
tblmain.style.height = hTable;
mFrame.height = hTable;
if(window.mainFrame.moduleRight != null){
//表示該內(nèi)嵌頁(yè)，包含內(nèi)嵌的頁(yè)面，頁(yè)iframe的id固定為moduleRight。
initFrameHeight(mFrame,hTable);
}
}
/**
* 獲取當(dāng)前頁(yè)面的高度
*/
function getBodyHeight(doc){
if(doc.all) return doc.body.offsetHeight;
else return doc.body.scrollHeight;
}
/**
* 獲取內(nèi)嵌頁(yè)中的高度.
* 若另含子內(nèi)嵌(moduleRight)頁(yè)時(shí),應(yīng)考慮該頁(yè)面的高度.
*/
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;
}
/**
* 設(shè)置子內(nèi)嵌頁(yè)面的高度.
* 通過(guò)設(shè)置iframe所在table的高度來(lái)調(diào)整。
*/
function initFrameHeight(frame,hFrame){
var tbl = frame.document.getElementById('tblMainFrame');
tbl.style.height = hFrame;
}
3、其他設(shè)置
主頁(yè)面(main.jsp)，在加載完畢（onload）、窗口大小調(diào)整(onresize)，以及iframe的加載完畢時(shí)，需調(diào)用: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
其他內(nèi)嵌頁(yè)如下(注：此處的iframe高度設(shè)為100%，其高度由父頁(yè)面通過(guò)設(shè)置table<
tblMainFrame>的高度來(lái)進(jìn)行調(diào)整)：
<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
4、樣例下載:
sample
posted on 2008-01-17 13:56
josson 閱讀(9320)
評(píng)論(2) 編輯 收藏 所屬分類:
web開(kāi)發(fā)