Iframe 自適應高度並即時監控高度變化的js程式碼

google N次 + 百度M次 + 試驗了1605次之後（聽說農藥1605就是實驗了這麼多次後出來的），得出下面成果，在IE7及Firefox3裡試了下還能湊合著用用！ 
1、先給個Iframe。 

<iframe id="ifrm" 
marginheight="0" 
marginwidth="0" 
height="100" 
width="1000" 
frameborder="0" 
scrolling="no" 
src="xxxxx.html"> 
</iframe>

2、然後看看怎麼取得Iframe中的頁面的高度。 
其實最麻煩的就是怎麼讓取得的高度準確，不同的方式不同的瀏覽器中獲得到的值都會不一樣！暈啊～～。參考了多方意見得出以下javascript函數（doc參數為window.document物件）： 

function getDocHeight(doc) 
{ 
//在IE中doc.body.scrollHeight的可信度最高 
//在Firefox中，doc.height就可以了 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight，包含了边框的高度 
if (doc.height) 
{ 
//Firefox支持此属性，IE不支持 
docHei = doc.height; 
} 
else if (doc.body) 
{ 
//在IE中，只有body.scrollHeight是与当前页面的高度一致的， 
//其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ 
//似乎跟包含它的窗口的大小变化有关 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement) 
{ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ 
*/ 
return docHei; 
}

3、最後修改Iframe的高度，並用一個計時器來不間斷檢查它包含的頁面的高度變化。 

function doReSize() 
{ 
var iframeWin = window.frames['ifrm']; 
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null; 
if ( iframeEl && iframeWin ) 
{ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
else if(iframeEl) 
{ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px'; 
} 
} 
function runResizeTask() 
{ 
doReSize(); 
setTimeout("runResizeTask()",500);//每隔半秒执行一次 
} 
runResizeTask();

在這裡就沒有去考慮被包含的頁面中是否有折疊、隱藏/展現的情況了！ 
完整js程式碼

<script language="javascript" type="text/javascript"> 
function getDocHeight(doc){ 
//在IE中doc.body.scrollHeight的可信度最高 
//在Firefox中，doc.height就可以了 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight，包含了边框的高度 

if (doc.height){ 
//Firefox支持此属性，IE不支持 
docHei = doc.height; 
} 
else if (doc.body){ 
//在IE中，只有body.scrollHeight是与当前页面的高度一致的， 
//其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ 
//似乎跟包含它的窗口的大小变化有关 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement){ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ 
*/ 
return docHei; 
} 
function doReSize(){ 
var iframeWin = window.frames[&#39;Main&#39;]; 
var iframeEl = window.document.getElementById? window.document.getElementById(&#39;Main&#39;): document.all? document.all[&#39;Main&#39;]: null; 
if ( iframeEl && iframeWin ){ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + &#39;px&#39;; 
} 
else if(iframeEl){ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + &#39;px&#39;; 
} 
} 

function runResizeTask(){ 
doReSize(); 
setTimeout("runResizeTask()",1000);//每隔1秒执行一次 
} 
runResizeTask(); 
</script>

更多Iframe 自適應高度並即時監控高度變化的js程式碼相關文章請關注PHP中文網！