快捷導(dǎo)航

Iframe 自適應(yīng)高度并實(shí)時(shí)監(jiān)控高度變化的js代碼

更新時(shí)間：2009年10月30日 13:22:50 作者：

不得不用到iframe，且被強(qiáng)烈要求不能讓它出現(xiàn)滾動(dòng)條！嵌入的頁面肯定是高度不一的，頁面中也不能出現(xiàn)大片空白，所以也不能寫死高度！真是麻鬼煩??！

google N次 + 百度M次 + 試驗(yàn)了1605次之后（聽說農(nóng)藥1605就是實(shí)驗(yàn)了這么多次后出來的），得出下面成果，在IE7及Firefox3里試了下還能湊合著用用！
1、首先給出個(gè)Iframe。

復(fù)制代碼代碼如下:

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

2、然后看看怎么獲取Iframe中的頁面的高度。
其實(shí)最麻煩的就是怎么讓獲取的高度準(zhǔn)確，不同的方式不同的瀏覽器中獲取到的值都會(huì)不一樣！暈啊～～。參考了多方意見得出以下javascript函數(shù)（doc參數(shù)為window.document對(duì)象）：

復(fù)制代碼代碼如下:

 
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是與當(dāng)前頁面的高度一致的， 
//其他的跳轉(zhuǎn)幾次后就會(huì)變的混亂，不知道是依照什么取的值！ 
//似乎跟包含它的窗口的大小變化有關(guān) 
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);//取最大的值，某些情況下可能與實(shí)際頁面高度不符！ 
*/ 
return docHei; 
} 

3、最后修改Iframe的高度，并用一個(gè)定時(shí)器來不間斷檢查它包含的頁面的高度變化。

復(fù)制代碼代碼如下:

 
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);//每隔半秒執(zhí)行一次 
} 
runResizeTask(); 

在這里就沒有去考慮被包含的頁面中是否有折疊、隱藏/展現(xiàn)的情況了！
完整js代碼

復(fù)制代碼代碼如下:

<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是與當(dāng)前頁面的高度一致的， 
//其他的跳轉(zhuǎn)幾次后就會(huì)變的混亂，不知道是依照什么取的值！ 
//似乎跟包含它的窗口的大小變化有關(guān) 
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);//取最大的值，某些情況下可能與實(shí)際頁面高度不符！ 
*/ 
return docHei; 
} 
function doReSize(){ 
var iframeWin = window.frames['Main']; 
var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: 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()",1000);//每隔1秒執(zhí)行一次 
} 
runResizeTask(); 
</script> 