일부 문서는 문서의 높이를 얻을 수 없습니다 (무엇보다 맨 아래에 물건을 놓기 위해). 또한 패딩 하단은이 페이지에서 아무 것도 수행하지 않는 것으로 보이지만 높이가 반환되는 페이지에서는 수행됩니다. 적절한 사례 :
http://fandango.com
http://paperbackswap.com
Fandango에서
jQuery $(document).height();는 올바른 값을
document.height반환합니다 .0
document.body.scrollHeight은 0을 반환합니다.
페이퍼 백 스왑에서 :
jQuery의 $(document).height();TypeError : $(document)is null
document.height은 잘못된 값을
document.body.scrollHeight반환하고 잘못된 값을 반환합니다
참고 : 트릭이 있으면 브라우저 수준의 권한이 있습니다.
답변
모든 브라우저가 clientHeight 및 scrollHeight 속성을 노출하지만 값이 계산되는 방식에 모두 일치하지는 않기 때문에 문서 크기는 브라우저 호환성 악몽입니다.
올바른 높이 / 너비를 테스트하는 방법에 대한 복잡한 모범 사례가있었습니다. 사용 가능한 경우 document.documentElement 속성을 사용하거나 문서 속성 등으로 돌아갑니다.
올바른 높이를 얻는 가장 간단한 방법은 문서 또는 documentElement에서 찾은 모든 높이 값을 가져 와서 가장 높은 값을 사용하는 것입니다. 이것은 기본적으로 jQuery가하는 일입니다.
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
Firebug + jQuery bookmarklet을 사용한 빠른 테스트 는 인용 된 페이지 모두에 대해 올바른 높이를 반환하므로 코드 예제도 마찬가지입니다.
문서가 준비되기 전에 문서의 높이를 테스트하면 항상 0이됩니다. 또한 더 많은 물건을 넣거나 사용자가 창 크기를 조정하면 다시 테스트해야 할 수도 있습니다. 로드 할 때 필요 onload하거나 문서 준비 이벤트를 사용하십시오 . 그렇지 않으면 번호가 필요할 때마다 테스트하십시오.
답변
이것은 정말 오래된 질문이므로 많은 오래된 답변이 있습니다. 2020 년 현재 모든 주요 브라우저는 표준을 준수합니다 .
2020 년 답변 :
document.body.scrollHeight편집 : 위는 <body>태그의 여백 을 고려 하지 않습니다 . 몸에 여백이 있으면 다음을 사용하십시오.
document.documentElement.scrollHeight답변
당신은 이것을 사용할 수도 있습니다 :
var B = document.body,
H = document.documentElement,
height
if (typeof document.height !== 'undefined') {
height = document.height // For webkit browsers
} else {
height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}
또는 더 jQuery 방식으로 (jQuery가 거짓말을하지 않기 때문에) 🙂
Math.max($(document).height(), $(window).height())답변
전체 문서 높이 계산 :
보다 일반적이고 문서 의 높이를 찾으려면 간단한 재귀를 사용하여 현재 페이지에서 가장 높은 DOM 노드를 찾을 수 있습니다.
;(function() {
var pageHeight = 0;
function findHighestNode(nodesList) {
for (var i = nodesList.length - 1; i >= 0; i--) {
if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
pageHeight = Math.max(elHeight, pageHeight);
}
if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
}
}
findHighestNode(document.documentElement.childNodes);
// The entire page height is found
console.log('Page height is', pageHeight);
})();
이 스크립트를 DevTools Console에 붙여 넣어 샘플 사이트 ( http://fandango.com/ 또는 http://paperbackswap.com/ ) 에서 테스트 할 수 있습니다 .
참고 : 작업 중입니다 Iframes.
즐겨!
답변
문서 크기를 결정하는 “jQuery 방법”은 모든 것을 쿼리하고, 가장 높은 가치를 취하며, 최상의 결과를 기대 합니다 .
문서 크기에 대해 방탄 결과가 실제로 필요한 경우 jQuery.documentSize 플러그인 을 사용하는 것이 좋습니다 . 다른 방법과 달리 실제로로드 될 때 브라우저 동작을 테스트하고 평가하며 결과에 따라 올바른 속성을 쿼리합니다.
이 일회성 테스트가 성능에 미치는 영향 은 미미 하며 플러그인은 가장 이상한 시나리오에서도 올바른 결과를 반환합니다. 내가 말한 것이 아니라 자동 생성 된 대규모 테스트 스위트가 실제로 그렇게하는지 검증하기 때문입니다.
플러그인은 바닐라 자바 스크립트로 작성되었으므로 jQuery 없이도 사용할 수 있습니다 .
답변
나는 jQuery가 $ (document) .height (); 두 페이지 모두에 대해 올바른 값을 반환한다고 거짓말했다.
답변
2017 년에 대한 정답은 다음과 같습니다.
document.documentElement.getBoundingClientRect().height
document.body.scrollHeight이 방법 과 달리 본문 여백이 설명됩니다. 또한 분수 높이 값을 제공하여 경우에 따라 유용 할 수 있습니다
