JavaScript에서 문서 높이를 어떻게 안정적으로 결정할 수 있습니까?

JavaScript로 문서 높이 결정

JavaScript로 문서의 올바른 높이를 얻는 것은 브라우저 호환성 문제로 인해 어려울 수 있습니다. 모든 브라우저는 clientHight 및 scrollHeight와 같은 속성을 제공하지만 계산 방법은 다양합니다.

Fandango 및 Paperback Swap 예

Fandango 및 Paperback Swap과 같은 웹사이트에서는 $ (document).height(), document.height 및 document.body.scrollHeight가 실패하거나 부정확하게 반환됩니다.

모범 사례: 최대 높이 계산

이 문제를 해결하기 위해 모범 사례가 등장했습니다. 사용 가능한 모든 소스에서 최대 높이를 결정하는 것입니다. 이것 포함:

• document.body.scrollHeight
• document.body.offsetHeight
• document.documentElement.cli entHeight
• document.documentElement.scrollHeight
• document.documentElement.offsetHeight

코드 구현

다음 코드 샘플은 이 접근 방식을 구현합니다.

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

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

고려 사항

• 문서가 준비되기 전에 문서 높이를 테스트합니다. 결과는 0입니다.
• 동적 콘텐츠 또는 창 크기 조정이 필요할 수 있습니다. 다시 테스트하세요.
• 초기 계산에는 onload 또는 문서 준비 이벤트를 사용하세요. 그렇지 않은 경우에는 필요에 따라 테스트하세요.

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