JavaScript로 전체 문서의 높이를 얻는 방법?

333

일부 문서는 문서의 높이를 얻을 수 없습니다 (무엇보다 맨 아래에 물건을 놓기 위해). 또한 패딩 하단은이 페이지에서 아무 것도 수행하지 않는 것으로 보이지만 높이가 반환되는 페이지에서는 수행됩니다. 적절한 사례 :

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반환하고 잘못된 값을 반환합니다

참고 : 트릭이 있으면 브라우저 수준의 권한이 있습니다.

javascript 
— 닉
소스
5
해당 사이트에 jQuery가로드되지 않았으므로 $ (document)은 null입니다.
— James
흠, 나는 jQuery가 등록되었음을 확인하기 위해 다른 것을 확인했지만 맹세하지 않았다. 방화범에 jQuery가 패키지되어 있다고 생각했습니다 ... 음, 솔루션인지 확인하십시오.
— Nic
4
불을 지르고는 JQuery와 포장이없는
— harsimranb
브라우저 창의 크기 찾기를 참조하십시오 . 다른 브라우저의 동작에 대한 훌륭한 표가 있습니다.
— Oriol

답변:

670

모든 브라우저가 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하거나 문서 준비 이벤트를 사용하십시오 . 그렇지 않으면 번호가 필요할 때마다 테스트하십시오.

— 보르가
소스
2
jQuery를 사용하면 프로토 타입 라이브러리를 사용할 때 작동하기 때문에이 솔루션을 평가하십시오. 이러한 문제는 없습니다.
— se_pavel
10
iframe 및 jquery로 작업 할 때이 계산 방법으로 인해 iframe의 문서 높이는 항상 iframe 자체의 높이가됩니다. 컨텐츠와 일치하도록 iframe의 높이를 줄이려면주의해야합니다. 먼저 iframe의 높이를 재설정해야합니다.
— David Lay
3
iframe을 확장하고 축소해야 할 필요가 있었으며 (facebook 앱) document.body.offsetHeight가 대부분의 브라우저에서 정확하게 지원되는 최고의 선택이라는 것을 알았습니다.
— JeffG
1
이것은 문서가 준비되지 않은 경우, 즉 서버 생성 코드에서 사용될 때 잘못된 결과를 줄 수 있지만 훌륭합니다.
— stuartdotnet
1
준비가되기 전에 문서를 테스트하면 작동하지 않습니다. 이는 생성 된 코드 / 문서와 관련이 없으며 문서가로드되는 방식과 관련이 있습니다. 테스트는 문서가 준비된 후에 실행되어야 하며 문서가 완전히로드 된 경우에만 나머지 항목이 높이에 영향을 미쳐 브라우저 크기를 조정할 수 있으므로 실행하는 것이 좋습니다.
— Borgar
214

이것은 정말 오래된 질문이므로 많은 오래된 답변이 있습니다. 2020 년 현재 모든 주요 브라우저는 표준을 준수합니다 .

2020 년 답변 :

document.body.scrollHeight

편집 : 위는 <body>태그의 여백 을 고려 하지 않습니다 . 몸에 여백이 있으면 다음을 사용하십시오.

document.documentElement.scrollHeight
— 마르 키조
소스
hm-지금 나는 그것을 테스트하고 작동합니다-왜 그런지 모르겠습니다-너무 좋아요 :)-나는 내 이전 의견을 삭제합니다
— Kamil Kiełczewski
6
2017 년 기준으로이 답변이 나에게 정답으로 표시되어야합니다.
— Joan
@Joan 그것은 결정하는 원래 포스터까지입니다 :)
— Marquizzo
여백이 있으면 작동하지 않습니다. document.documentElement.getBoundingClientRect()더 잘 작동합니다.
— torvin
3
여기에는 한 가지 오류가 있습니다. 예를 들어 <h1>시작 부분에 <body>기본 여백이있는 <body>요소가 있다고 감지 하면 요소를 감지 할 수있는 방법없이 요소가 아래로 내려갑니다. document.documentElement.scrollHeight(가 아님 document.body,scrollHeight)이 가장 정확한 방법입니다. 이것은 몸의 여백과 몸 안의 물건의 여백 모두 아래쪽으로 밀어 넣습니다.
— Ethan
29

당신은 이것을 사용할 수도 있습니다 :

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())
— 미모
소스
24

전체 문서 높이 계산 :

보다 일반적이고 문서 의 높이를 찾으려면 간단한 재귀를 사용하여 현재 페이지에서 가장 높은 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.

즐겨!

— 안드리 베르 비츠 키
소스
2
이것은 매력처럼 작동했습니다! 여기에 다른 대답은 전체 높이 (스크롤 가능 영역 포함)를 얻는 데 사용할 수 없으며 모두 가시 영역의 높이 만 반환합니다.
— Martin Kristiansson
정말 예외적입니다. 내가 phantomjs에서 일하는 사람은 하나 뿐이라고 생각합니다.
— MindlessRanger
6

문서 크기를 결정하는 "jQuery 방법"은 모든 것을 쿼리하고, 가장 높은 가치를 취하며, 최상의 결과를 기대 합니다 .

문서 크기에 대해 방탄 결과가 실제로 필요한 경우 jQuery.documentSize 플러그인 을 사용하는 것이 좋습니다 . 다른 방법과 달리 실제로로드 될 때 브라우저 동작을 테스트하고 평가하며 결과에 따라 올바른 속성을 쿼리합니다.

이 일회성 테스트가 성능에 미치는 영향 은 미미 하며 플러그인은 가장 이상한 시나리오에서도 올바른 결과를 반환합니다. 내가 말한 것이 아니라 자동 생성 된 대규모 테스트 스위트가 실제로 그렇게하는지 검증하기 때문입니다.

플러그인은 바닐라 자바 ​​스크립트로 작성되었으므로 jQuery 없이도 사용할 수 있습니다 .

— 해시 변경
소스
5

나는 jQuery가 $ (document) .height (); 두 페이지 모두에 대해 올바른 값을 반환한다고 거짓말했다.

— 닉
소스
1
다른 브라우저는 형제.
— jahrichie
4

2017 년에 대한 정답은 다음과 같습니다.

document.documentElement.getBoundingClientRect().height

document.body.scrollHeight이 방법 과 달리 본문 여백이 설명됩니다. 또한 분수 높이 값을 제공하여 경우에 따라 유용 할 수 있습니다

— 토빈
소스
1
이 페이지에서 메소드를 시도 할 때 얻은 결과는 다음과 같습니다. i.imgur.com/0psVkIk.png 이 메소드는 창 높이와 비슷한 것을 반환하지만 document.body.scrollHeight스크롤 가능한 전체 높이 를 나열합니다. 이는 원래 질문의 질문입니다.
— Marquizzo
2
@Marquizzo는이 페이지가 html { height: 100% }CSS에 있기 때문 입니다. 따라서 API는 실제 계산 된 높이를 올바르게 반환합니다 . 이 스타일을 제거하고 여백을 추가하면를 body사용하는 데 문제가있는 것을 볼 수 document.body.scrollHeight있습니다.
— torvin
여기에는 한 가지 오류가 있습니다. 예를 들어 <h1>시작 부분에 <body>기본 여백이있는 <body>요소가 있다고 감지 하면 요소를 감지 할 수있는 방법없이 요소가 아래로 내려갑니다. document.documentElement.scrollHeight(가 아님 document.body,scrollHeight)이 가장 정확한 방법입니다.
— Ethan
@Booligoosh 무슨 뜻인지 잘 모르겠습니다. documentElement.scrollHeight이 경우 잘못된 값을 제공합니다. documentElement.getBoundingClientRect().height올바른 것을 제공합니다. 이 체크 아웃 jsfiddle.net/fLpqjsxd
— Torvin 사용자
1
@torvin Fact는 의도 한 결과가에 의해 반환되지 않는 것으로 남아 있습니다 getBoundingClientRect().height. 3 (3) 가지 다른 방법은 부수적이지 않은 반면에 당신이 그것보다 열등하다고 언급 한 것을 포함합니다. 그리고이 페이지의 html 높이에서 100 %를 제거하고 여백을 추가하여 제안해야합니다. 점은 무엇인가 ? getBoundingClientRect().height방탄이 아님을 인정하십시오 .
— Rob Waa
2

크로스 브라우저 / 장치 방식으로 너비를 얻으려면 다음을 사용하십시오.

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}
— 사용자
소스
11
우리는 키에 대해 이야기하고 있습니다. 너비가 아닙니다.
— Yash
0

기능 감지를 사용하여 요청시 페이지를 스크롤하는 데 문제가있는 사용자는 애니메이션 스크롤에서 사용할 기능을 감지하기 위해이 핵을 발견했습니다.

문제는 둘이었다 document.body.scrollTop그리고 document.documentElement항상 반환 true모든 브라우저에서.

그러나 실제로 하나 또는 다른 문서 만 스크롤 할 수 있습니다. w3schools 에 따른 d.body.scrollTopSafari 및 document.documentElement기타 모든 사용자 (예제 참조)

element.scrollTop 모든 브라우저에서 작동하지만 문서 수준에서는 작동하지 않습니다.

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }
— YK
소스
-1

계산 높이 + 스크롤에 블로우 코드 사용

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";
— 알리 바 게리
소스
-1

아래의이 크로스 브라우저 코드는 body 및 html 요소의 가능한 모든 높이를 평가하고 찾은 최대 값을 반환합니다.

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

실제 예 :

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();
body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}
<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
스 니펫 확장

— 윌리 ka 카
소스
하향 조정의 경우 동기를 설명하여 요점을 바로 잡으십시오. 대단히 감사합니다
— willy wonka
-4

나는 지금 높이를 결정하는 것에 대해 모른다. 그러나 이것을 사용하여 바닥에 무언가를 넣을 수있다.

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>
— 제디 호크
소스
1
날 믿어, 나는 이것에 HTML과 CSS 리소스를 소진했다. 설명 할 수는 없지만 해당 사이트에서 시도하면 문제가 나타납니다.
— Nic
-4

참조를 올바르게 추가

내 경우에는 ASCX 페이지를 사용하고 있었고 ascx 컨트롤이 포함 된 aspx 페이지가 참조를 올바르게 사용하지 않습니다. 방금 다음 코드를 붙여 넣고 작동했습니다.

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>
— 쓸 데 없는 말
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.