Iframe 적응형 높이 및 높이 변경 실시간 모니터링 js code_javascript 기술

구글 N번, 바이두 M번 1605번 테스트(너무 많은 실험 끝에 농약 1605가 나왔다고 들었습니다) 결과는 다음과 같습니다. IE7과 Firefox3에서 시도해 보았는데 여전히 작동합니다!
1. 먼저 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['ifrm'];
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): 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);//Every half second 한 번 실행
}
runResizeTask()

포함된 페이지가 접혀 있는지, 숨겨졌는지/표시되는지 고려할 필요가 없습니다!
js 코드 완성

코드 복사 코드는 다음과 같습니다.