[轉貼]利用JAVASCRIPT讓IFRAME框架的高度自適應
http://tc.wangchao.net.cn/bbs/detail_1849262.html
頁面內嵌不同的網頁內容時，導致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 >
<iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" />
</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>(王朝網路 wangchao.net.cn)
