Iframe自适应高度并实时监控高度变化的js代码

经过多次搜索与1605次试验（正如农药1605的研发历程），最终整理出以下方案，并在IE7与Firefox3浏览器中验证，表现尚可。

Iframe基础定义

第一步，定义一个Iframe元素。

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

获取Iframe内部高度的方法

第二步，探讨如何准确获取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;
} 

动态调整与实时监控实现

第三步，修改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();

此处未考虑被包含页面中存在折叠、隐藏或展现等复杂交互情况。

完整的JavaScript代码示例如下：

<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['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秒执行一次
} 
runResizeTask();
</script>