Jak uzyskać wysokość całego dokumentu za pomocą JavaScript?

333

Niektórych dokumentów nie mogę uzyskać wysokości dokumentu (aby umieścić coś absolutnie na samym dole). Dodatkowo wypełnienie na dole wydaje się nic nie robić na tych stronach, ale na stronach, na których powróci wysokość. Przypadki w pkt:

http://fandango.com
http://paperbackswap.com

W przypadku Fandango
jQuery $(document).height();zwraca poprawną wartość
document.heightzwraca 0
document.body.scrollHeightzwraca 0

W zamianie w miękkiej oprawie:
Błąd typu jQuery $(document).height();: $(document)null
document.heightzwraca niepoprawną wartość
document.body.scrollHeightzwraca niepoprawną wartość

Uwaga: Mam uprawnienia na poziomie przeglądarki, jeśli jest tam jakaś sztuczka.

javascript

— Nic
źródło

5

$ (dokument) ma wartość NULL, ponieważ na tej stronie nie załadowano jQuery ...

— James

Hm, mógłbym przysiąc, że sprawdziłem coś innego, aby potwierdzić, że jQuery został zarejestrowany, ale nie wygląda na to, że tak zrobiłem, HA! Myślałem, że Firebug ma jQuery zapakowane ... hm, chyba to sprawdzę, jeśli to rozwiązanie.

— Nic,

4

Firebug nie posiada jQuery pakowane

— harsimranb

Zobacz Znajdowanie rozmiaru okna przeglądarki . Ma świetną tabelę zachowań różnych przeglądarek.

— Oriol

670

Rozmiary dokumentów to koszmar kompatybilności z przeglądarkami, ponieważ chociaż wszystkie przeglądarki ujawniają właściwości clientHeight i scrollHeight, nie wszystkie zgadzają się co do sposobu obliczania wartości.

Kiedyś istniała złożona najlepsza praktyka dotycząca sprawdzania prawidłowej wysokości / szerokości. Wiązało się to z użyciem właściwości document.documentElement, jeśli jest dostępna, lub poleganiem na właściwościach dokumentu i tak dalej.

Najprostszym sposobem uzyskania prawidłowej wysokości jest uzyskanie wszystkich wartości wysokości znalezionych w dokumencie lub documentElement i użycie najwyższej. Jest to w zasadzie to, co robi jQuery:

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

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

Szybki test za pomocą Firebug + bookmarklet jQuery zwraca prawidłową wysokość dla obu cytowanych stron, podobnie jak przykład kodu.

Pamiętaj, że testowanie wysokości dokumentu przed przygotowaniem dokumentu zawsze spowoduje 0. Ponadto, jeśli załadujesz więcej rzeczy lub użytkownik zmieni rozmiar okna, może być konieczne ponowne przetestowanie. Użycie onloadlub dokument gotowy zdarzenie, jeśli to potrzebne w czasie ładowania, w przeciwnym razie po prostu sprawdzić, kiedy trzeba numer.

— Borgar
źródło

2

oceń to rozwiązanie, ponieważ działa, gdy używasz biblioteki prototypów, w jQuery nie ma takiego problemu

— se_pavel 29.09.2009

10

Podczas pracy z iframe i jquery, z powodu tej metody obliczania, wysokość dokumentu iframe zawsze będzie wynosić co najmniej wysokość samego iframe. Należy o tym pamiętać, gdy chcesz zmniejszyć wysokość elementu iframe w celu dopasowania do treści. Najpierw musisz zresetować wysokość ramki iframe.

— David Lay

3

Musiałem rozwinąć iframe i zmniejszyć go (aplikacja na Facebooku) i znalazłem ten document.body.offsetHeight był dla mnie najlepszym wyborem, obsługiwanym przez większość przeglądarek.

— JeffG,

1

Jest to świetne, chociaż może dawać niepoprawne wyniki, jeśli dokument nie jest gotowy - tzn. Gdy jest używany w kodzie generowanym przez serwer ...

— stuartdotnet

1

Testowanie dokumentu przed jego przygotowaniem nie będzie działać. Nie ma to nic wspólnego z wygenerowanym kodem / dokumentami, ale raczej z tym, jak dokument jest ładowany. Test musi zostać uruchomiony po przygotowaniu dokumentu i sugeruję uruchomienie go tylko wtedy, gdy dokument jest w pełni załadowany, ponieważ pozostałe elementy mogą wpłynąć na wysokość, a także zmienić rozmiar przeglądarki.

— Borgar,

214

To jest naprawdę stare pytanie, dlatego ma wiele nieaktualnych odpowiedzi. Od 2020 r. Wszystkie główne przeglądarki są zgodne ze standardem .

Odpowiedź na 2020 r .:

document.body.scrollHeight

Edycja: powyższe nie uwzględnia marginesów na <body>tagu. Jeśli twoje ciało ma marginesy, użyj:

document.documentElement.scrollHeight

— Marquizzo
źródło

hm - teraz go testuję i działa - nie wiem dlaczego - więc ok :) - usuwam mój poprzedni komentarz

— Kamil Kiełczewski

6

Począwszy od 2017 r. Należy to zaznaczyć jako właściwą odpowiedź.

— Joan

@Joan To zależy od oryginalnego plakatu, aby zdecydować :)

— Marquizzo,

Nie działa przy marginesach. document.documentElement.getBoundingClientRect()działa lepiej.

— torvin

3

Jest z tym jeden błąd: Powiedzmy na przykład, że <h1>na początku jest element <body>z domyślnym marginesem, zepchnie <body>element w dół bez możliwości jego wykrycia. document.documentElement.scrollHeight(nie document.body,scrollHeight) to najdokładniejszy sposób robienia rzeczy. Działa to zarówno z marginesami ciała, jak i marginesami wewnątrz ciała, popychając go w dół.

— Ethan

29

Możesz nawet użyć tego:

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 );
}

lub w bardziej jQuery sposób (ponieważ jak powiedziałeś, jQuery nie kłamie) :)

Math.max($(document).height(), $(window).height())

— Mimo
źródło

24

Pełne obliczenie wysokości dokumentu:

Aby być bardziej ogólnym i znaleźć wysokość dowolnego dokumentu, możesz po prostu znaleźć najwyższy węzeł DOM na bieżącej stronie za pomocą prostej rekurencji:

;(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);
})();

Możesz go przetestować na przykładowych stronach ( http://fandango.com/ lub http://paperbackswap.com/ ), wklejając ten skrypt do konsoli DevTools.

UWAGA: działa z Iframes.

Cieszyć się!

— Andrii Verbytskyi
źródło

2

To działało jak urok! Żadna inna odpowiedź tutaj nie pozwala uzyskać pełnej wysokości (włączając przewijany obszar), wszystkie zwracają tylko wysokość widocznego obszaru.

— Martin Kristiansson

Naprawdę wyjątkowy, nigdy o tym nie myślałem. Podejrzewam, że tylko jeden pracuje w fantomach.

— MindlessRanger

6

„Metoda jQuery” polegająca na określaniu rozmiaru dokumentu - sprawdzanie wszystkiego, przyjmowanie najwyższej wartości i nadzieja na najlepsze - działa w większości przypadków, ale nie we wszystkich .

Jeśli naprawdę potrzebujesz wyników kuloodpornych dla rozmiaru dokumentu, sugeruję użycie mojej wtyczki jQuery.documentSize . W przeciwieństwie do innych metod, faktycznie testuje i ocenia zachowanie przeglądarki po załadowaniu i, w oparciu o wynik, odpytuje od niej odpowiednią właściwość.

Wpływ tego jednorazowego testu na wydajność jest minimalny , a wtyczka zwraca prawidłowe wyniki nawet w najdziwniejszych scenariuszach - nie dlatego, że tak mówię, ale ponieważ ogromny, automatycznie wygenerowany pakiet testowy faktycznie to potwierdza.

Ponieważ wtyczka jest napisana w waniliowym JavaScript, możesz jej używać także bez jQuery .

— hashchange
źródło

5

Skłamałem, jQuery zwraca poprawną wartość dla obu stron $ (dokument) .height (); ... dlaczego kiedykolwiek w to wątpiłem?

— Nic
źródło

1

Różne przeglądarki bracie.

— jahrichie

4

Prawidłowa odpowiedź na rok 2017 to:

document.documentElement.getBoundingClientRect().height

W przeciwieństwie do document.body.scrollHeighttej metody uwzględnia marginesy ciała. Podaje także ułamkową wartość wysokości, co może być przydatne w niektórych przypadkach

— torvin
źródło

1

Oto wyniki, które otrzymuję, gdy wypróbuję twoją metodę na tej stronie: i.imgur.com/0psVkIk.png Twoja metoda zwraca coś, co wygląda jak wysokość okna, podczas gdy document.body.scrollHeightwyświetla całą wysokość przewijalną, czyli to, co zadało oryginalne pytanie.

— Marquizzo

2

@Marquizzo dlatego, że ta strona ma html { height: 100% }w css. Zatem API poprawnie zwraca rzeczywistą obliczoną wysokość. Spróbuj usunąć ten styl, a także dodać marginesy, bodya zobaczysz, na czym polega problem z używaniem document.body.scrollHeight.

— torvin

Jest z tym jeden błąd: Powiedzmy na przykład, że <h1>na początku jest element <body>z domyślnym marginesem, zepchnie <body>element w dół bez możliwości jego wykrycia. document.documentElement.scrollHeight(nie document.body,scrollHeight) to najdokładniejszy sposób robienia rzeczy.

— Ethan

@Booligoosh nie jestem pewien, co masz na myśli. documentElement.scrollHeightpodaje w tym przypadku niewłaściwą wartość. documentElement.getBoundingClientRect().heightdaje poprawny. sprawdź to: jsfiddle.net/fLpqjsxd

— torvin

1

@torvin Faktem pozostaje, że nie zamierzony wynik jest zwracany przez getBoundingClientRect().height. Zostaje odsunięty na bok, podczas gdy 3 (trzy) inne metody nie zostają odsunięte na bok. W tym ten, o którym wspominasz jako gorszy. I nalegasz na to, sugerując usunięcie 100% z wysokości strony HTML i dodanie do niej marginesów. Jaki jest sens ? Po prostu zaakceptuj, że nie getBoundingClientRect().heightjest to również kuloodporne.

— Rob Waa

2

Aby uzyskać szerokość w trybie przeglądarki / urządzenia, użyj:

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

    return actualWidth;
}

— użytkownik937284
źródło

11

mówimy o wysokości. nie szerokość.

— Yash

0

Dla każdego, kto ma problemy z przewijaniem strony na żądanie, używając funkcji wykrywania funkcji, wymyśliłem ten hack, aby wykryć, która funkcja ma być używana w animowanym przewijaniu.

Problem był zarówno document.body.scrollTopi document.documentElementzawsze zwracany truewe wszystkich przeglądarkach.

Można jednak przewijać dokument tylko jednym lub drugim. d.body.scrollTopdla Safari i document.documentElementdla wszystkich innych według w3schools (patrz przykłady)

element.scrollTop działa we wszystkich przeglądarkach, a nie na poziomie dokumentu.

    // 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
źródło

-1

użyj kodu nadmuchu do obliczenia wysokości + przewijania

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

var height = dif + document.documentElement.scrollHeight +"px";

— Ali Bagheri
źródło

-1

Poniższy kod dla różnych przeglądarek ocenia wszystkie możliwe wysokości elementów body i HTML i zwraca maksymalną znalezioną wartość:

            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

Przykład roboczy:

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 />

Rozwiń fragment kodu

— Willy Wonka
źródło

Proszę wyjaśnić motywację w przypadku głosowania w dół, abym mógł poprawić punkt.

— Wielkie

-4

Nie wiem o określaniu wysokości, ale możesz użyć tego, aby umieścić coś na dole:

<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>

— jedihawk
źródło

1

Zaufaj mi, wyczerpałem już zasoby HTML i CSS. Nie mogę tego wyjaśnić, ale problemy wystąpią, jeśli spróbujesz tego na tych stronach.

— Nic.

-4

Dodaj odpowiednie referencje

W moim przypadku korzystałem ze strony ASCX, a strona aspx zawierająca kontrolkę ascx nie używa poprawnie referencji. Właśnie wkleiłem następujący kod i zadziałało:

<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>

— Bzdury
źródło