Iframe 自适应高度并实时监控高度变化的js代码-tutorial js-php.cn

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

高洛峰

Lepaskan： 2017-01-09 09:23:16

asal

1644 orang telah melayarinya

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>

Salin selepas log masuk

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; 
}

Salin selepas log masuk

3、最后修改Iframe的高度，并用一个定时器来不间断检查它包含的页面的高度变化。

function doReSize() 
{ 
var iframeWin = window.frames[&#39;ifrm&#39;]; 
var iframeEl = window.document.getElementById? window.document.getElementById(&#39;ifrm&#39;): document.all? document.all[&#39;ifrm&#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()",500);//每隔半秒执行一次 
} 
runResizeTask();

Salin selepas log masuk

在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了！
完整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>

Salin selepas log masuk

更多Iframe 自适应高度并实时监控高度变化的js代码相关文章请关注PHP中文网！