다양한 브라우저에서 JavaScript로 웹 문서의 높이를 어떻게 안정적으로 확인할 수 있습니까?

JavaScript를 사용하여 문서 높이 결정: 브라우저 간 문제 공개

특정 웹 문서에서는 표준 방법을 사용하여 높이를 검색하는 것이 어렵습니다. 이 문제는 문서 하단 패딩의 비효율성으로 인해 더욱 복잡해집니다. 예를 들어 fandango.com 및 paperbackswap.com 웹사이트를 생각해 보세요.

fandango.com의

• jQuery의 $(document).height()는 올바른 값을 제공합니다.
• document.height가 반환됩니다. 0.
• document.body.scrollHeight는 0을 반환합니다.

paperbackswap.com에서:

• jQuery의 $(document).height()는 유형 오류: $(문서)는 다음과 같습니다. null.
• document.height가 잘못된 값을 반환합니다.
• document.body.scrollHeight가 잘못된 값을 반환합니다.

브라우저 간 문서 높이 계산은 호환성이 좋지 않습니다. . 모든 브라우저는 clientHeight 및 scrollHeight 속성을 제공하지만 계산 방법이 다릅니다.

정확한 높이 검색을 위한 모범 사례
올바른 문서 높이를 얻는 가장 신뢰할 수 있는 방법은 다음을 수집하는 것입니다. document 또는 documentElement의 모든 높이 값을 선택하고 가장 높은 값을 활용합니다. 이 접근 방식은 본질적으로 jQuery에서 사용됩니다.

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

이 방법은 fandango.com과 paperbackswap.com 모두에 대해 올바른 높이를 산출합니다.

주의 사항
시도 문서가 완전히 로드되기 전에 문서 높이를 검색하면 항상 0이 됩니다. 또한 동적 콘텐츠 로드 또는 창 크기 조정이 필요할 수 있습니다. 재테스트 중입니다. 이러한 이벤트를 모니터링하고 그에 따라 테스트하세요.

위 내용은 다양한 브라우저에서 JavaScript로 웹 문서의 높이를 어떻게 안정적으로 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!