Iframe 적응형 높이 및 높이 변화 실시간 모니터링을 위한 Node.js 코드-JS 튜토리얼-php.cn

Iframe 적응형 높이 및 높이 변화 실시간 모니터링을 위한 Node.js 코드

高洛峰

풀어 주다： 2017-01-09 09:23:16

원래의

1644명이 탐색했습니다.

구글 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에서 페이지 높이를 가져오는 방법을 알아보세요.
사실 가장 고민되는 것은 어떻게 하면 높은 정확도를 얻을 수 있느냐는 것인데, 방법과 브라우저에 따라 얻는 값이 다를 것입니다! 현기증~~. 많은 의견을 참고하여 다음과 같은 자바스크립트 함수를 생각해냈습니다(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[&#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();

로그인 후 복사

포함된 페이지가 접혀 있는지, 숨겨졌는지/표시되는지 고려할 필요가 없습니다!
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 중국어에 주목하세요. 웹사이트!