Wie erhalte ich mit JavaScript die Höhe des gesamten Dokuments?

333

Bei einigen Dokumenten kann ich die Höhe des Dokuments nicht ermitteln (um etwas ganz unten zu positionieren). Darüber hinaus scheint ein Padding-Bottom-On auf diesen Seiten nichts zu bewirken, sondern auf den Seiten, auf denen die Höhe zurückkehren wird. Beispiel (e):

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

Bei Fandango gibt
jQuery den $(document).height();korrekten Wert
document.heightzurück. 0
document.body.scrollHeightgibt 0 zurück

Beim Taschenbuchwechsel:
jQuery's $(document).height();TypeError: $(document)is null
document.heightgibt einen falschen Wert
document.body.scrollHeightzurück. Gibt einen falschen Wert zurück

Hinweis: Ich habe Berechtigungen auf Browserebene, wenn es dort einen Trick gibt.

javascript Nic
quelle

5

$ (Dokument) ist null, weil auf dieser Site jQuery nicht geladen ist ...

James

Hm, hätte schwören können, dass ich etwas anderes überprüft habe, um zu bestätigen, dass jQuery registriert wurde, aber es sieht nicht so aus wie ich, HA! Ich dachte, Firebug hätte jQuery gepackt ... hm, ich denke, ich werde das dann überprüfen, wenn es eine Lösung ist.

Nic

4

Firebug hat nicht jQUery verpackt

Harsimranb

Siehe Ermitteln der Größe des Browserfensters . Es hat eine großartige Tabelle mit den Verhaltensweisen verschiedener Browser.

Oriol

670

Dokumentgrößen sind ein Albtraum für die Browserkompatibilität, da alle Browser zwar die Eigenschaften clientHeight und scrollHeight offenlegen, sich jedoch nicht alle darauf einigen, wie die Werte berechnet werden.

Früher gab es eine komplexe Best-Practice-Formel dafür, wie Sie die richtige Höhe / Breite getestet haben. Dies beinhaltete die Verwendung von document.documentElement-Eigenschaften, falls verfügbar, oder das Zurückgreifen auf Dokumenteigenschaften und so weiter.

Der einfachste Weg, um die richtige Höhe zu erhalten, besteht darin, alle im Dokument oder documentElement gefundenen Höhenwerte abzurufen und den höchsten zu verwenden. Dies ist im Grunde das, was jQuery tut:

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

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

Ein schneller Test mit dem Firebug + jQuery-Lesezeichen gibt die korrekte Höhe für beide zitierten Seiten zurück, ebenso wie das Codebeispiel.

Beachten Sie, dass das Testen der Höhe des Dokuments, bevor das Dokument fertig ist, immer zu einer 0 führt. Wenn Sie mehr Material einladen oder der Benutzer die Fenstergröße ändert, müssen Sie möglicherweise erneut testen. Verwenden Sie onloadoder ein dokumentbereites Ereignis, wenn Sie dies beim Laden benötigen. Andernfalls testen Sie einfach, wann immer Sie die Nummer benötigen.

Borgar
quelle

2

Bewerten

10

Bei der Arbeit mit Iframes und JQuery entspricht die Dokumenthöhe des Iframes aufgrund dieser Berechnungsmethode immer mindestens der Höhe des Iframes. Dies ist wichtig zu beachten, wenn Sie die Höhe des Iframes reduzieren möchten, um sie an den Inhalt anzupassen. Sie müssen zuerst die Höhe des Iframes zurücksetzen.

David Lay

3

Ich musste den Iframe vergrößern und verkleinern (Facebook-App) und fand, dass document.body.offsetHeight die beste Wahl für mich war, genau unterstützt von den meisten Browsern.

JeffG

1

Dies ist großartig, kann jedoch zu falschen Ergebnissen führen, wenn das Dokument nicht bereit ist - dh wenn es in vom Server generiertem Code verwendet wird ...

stuartdotnet

1

Das Testen des Dokuments, bevor es fertig ist, funktioniert nicht. Dies hat nichts mit generiertem Code / generierten Dokumenten zu tun, sondern vielmehr damit, wie das Dokument geladen wird. Der Test muss ausgeführt werden, nachdem das Dokument fertig ist, und ich würde empfehlen, ihn nur auszuführen , wenn das Dokument vollständig geladen ist, da verbleibende Elemente die Höhe beeinflussen und auch die Größe des Browsers ändern können.

Borgar

212

Dies ist eine wirklich alte Frage und hat daher viele veraltete Antworten. Ab 2020 haben sich alle gängigen Browser an den Standard gehalten .

Antwort für 2020:

document.body.scrollHeight

Bearbeiten: Bei den obigen <body>Angaben werden die Ränder des Tags nicht berücksichtigt. Wenn Ihr Körper Ränder hat, verwenden Sie:

document.documentElement.scrollHeight

Marquizzo
quelle

hm - jetzt

teste

6

Ab 2017 sollte dies als die richtige Antwort für mich markiert werden.

Joan

@ Joan Das ist bis zum Originalplakat zu entscheiden :)

Marquizzo

Funktioniert nicht bei vorhandenen Rändern. document.documentElement.getBoundingClientRect()funktioniert besser.

Torvin

3

Hierbei gibt es einen Fehler: Angenommen, <h1>am Anfang des Elements befindet sich ein Element <body>mit dem Standardrand. Es drückt das <body>Element nach unten, ohne dass es erkannt werden kann. document.documentElement.scrollHeight(nicht document.body,scrollHeight) ist die genaueste Art, Dinge zu tun. Dies funktioniert sowohl mit Körperrändern als auch mit Materialrändern im Körper, die ihn nach unten drücken.

Ethan

29

Sie können dies sogar verwenden:

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

oder eher jQuery (da wie gesagt jQuery nicht lügt) :)

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

Mimo
quelle

24

Vollständige Berechnung der Dokumenthöhe:

Um allgemeiner zu sein und die Höhe eines Dokuments zu ermitteln, können Sie mit einer einfachen Rekursion einfach den höchsten DOM-Knoten auf der aktuellen Seite finden:

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

Sie können es auf Ihren Beispielseiten ( http://fandango.com/ oder http://paperbackswap.com/ ) testen, indem Sie dieses Skript in eine DevTools-Konsole einfügen.

HINWEIS: Es funktioniert mit Iframes.

Genießen!

Andrii Verbytskyi
quelle

2

Das hat wie ein Zauber gewirkt! Keine andere Antwort hier funktioniert, um die volle Höhe (einschließlich des scrollbaren Bereichs) zu erhalten. Alle geben nur die Höhe des sichtbaren Bereichs zurück.

Martin Kristiansson

Wirklich außergewöhnlich, habe nie daran gedacht. Ich nehme an, nur einer arbeitet in Phantomjs.

MindlessRanger

6

Die "jQuery-Methode" zum Bestimmen der Dokumentgröße - alles abfragen, den höchsten Wert annehmen und auf das Beste hoffen - funktioniert in den meisten Fällen, jedoch nicht in allen .

Wenn Sie wirklich kugelsichere Ergebnisse für die Dokumentgröße benötigen, empfehlen wir Ihnen, mein Plugin jQuery.documentSize zu verwenden . Im Gegensatz zu den anderen Methoden testet und bewertet es das Browserverhalten beim Laden und fragt von da an die richtige Eigenschaft ab.

Der Einfluss dieses einmaligen Tests auf die Leistung ist minimal , und das Plugin liefert selbst in den seltsamsten Szenarien die richtigen Ergebnisse - nicht weil ich es sage, sondern weil eine massive, automatisch generierte Testsuite dies tatsächlich überprüft.

Da das Plugin in Vanilla Javascript geschrieben ist, können Sie es auch ohne jQuery verwenden .

Hashwechsel
quelle

5

Ich habe gelogen, jQuery gibt den korrekten Wert für beide Seiten zurück $ (document) .height (); ... warum habe ich jemals daran gezweifelt?

Nic
quelle

1

Verschiedene Browser bro.

Jahrichie

4

Die richtige Antwort für 2017 lautet:

document.documentElement.getBoundingClientRect().height

Im Gegensatz zu document.body.scrollHeightdieser Methode werden die Körperränder berücksichtigt. Es gibt auch einen Bruchhöhenwert an, der in einigen Fällen nützlich sein kann

Torvin
quelle

1

Dies sind die Ergebnisse, die ich erhalte, wenn ich Ihre Methode auf dieser Seite ausprobiere : i.imgur.com/0psVkIk.png Ihre Methode gibt etwas zurück, das der Fensterhöhe ähnelt , während document.body.scrollHeightdie gesamte scrollbare Höhe aufgelistet wird, wie in der ursprünglichen Frage gestellt.

Marquizzo

2

@ Marquizzo das liegt daran, dass diese Seite html { height: 100% }in CSS hat. Die API gibt also den Real korrekt zurück berechnete Höhe . Versuchen Sie, diesen Stil zu entfernen und Ränder hinzuzufügen, bodyund Sie werden sehen, wo das Problem bei der Verwendung liegt document.body.scrollHeight.

Torvin

Hierbei gibt es einen Fehler: Angenommen, <h1>am Anfang des Elements befindet sich ein Element <body>mit dem Standardrand. Es drückt das <body>Element nach unten, ohne dass es erkannt werden kann. document.documentElement.scrollHeight(nicht document.body,scrollHeight) ist die genaueste Art, Dinge zu tun.

Ethan

@Booligoosh nicht sicher, was du meinst. documentElement.scrollHeightgibt in diesem Fall einen falschen Wert an. documentElement.getBoundingClientRect().heightgibt die richtige. Überprüfen Sie dies aus: jsfiddle.net/fLpqjsxd

Torvin

1

@torvin Fakt bleibt, dass nicht das beabsichtigte Ergebnis von zurückgegeben wird getBoundingClientRect().height. Es wird abgelenkt, während 3 (drei) andere Methoden nicht abgelenkt werden. Einschließlich der, die Sie als minderwertig erwähnen. Und Sie bestehen darauf, indem Sie vorschlagen, 100% von der HTML-Höhe dieser Seite zu entfernen und Ränder hinzuzufügen. Was ist der Punkt ? Akzeptiere einfach, dass getBoundingClientRect().heightdas auch nicht kugelsicher ist.

Rob Waa

2

Um die Breite browser- / geräteübergreifend zu ermitteln, verwenden Sie:

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

    return actualWidth;
}

user937284
quelle

11

Wir sprechen über Höhe. nicht Breite.

Yash

0

Für alle, die Probleme beim Scrollen einer Seite bei Bedarf mithilfe der Funktionserkennung haben, habe ich diesen Hack entwickelt, um zu erkennen, welche Funktion in einem animierten Bildlauf verwendet werden soll.

Das Problem war beides document.body.scrollTopund wurde document.documentElementimmer truein allen Browsern zurückgegeben.

Sie können jedoch nur ein Dokument mit dem einen oder anderen scrollen. d.body.scrollTopfür Safari und document.documentElementfür alle anderen nach w3schools (siehe Beispiele)

element.scrollTop funktioniert in allen Browsern, nicht auf Dokumentebene.

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

-1

Verwenden Sie den Blow-Code für die Berechnung der Höhe + des Bildlaufs

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

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

Ali Bagheri
quelle

-1

Dieser Cross-Browser-Code unten wertet alle möglichen Höhen der Body- und HTML-Elemente aus und gibt das maximal gefundene zurück:

            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

Ein Arbeitsbeispiel:

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

Erweitern Sie das Snippet

willy wonka
quelle

Bitte erläutern Sie die Motivation im Falle einer Ablehnung, damit ich den Punkt korrigieren kann. Vielen Dank

willy wonka

-4

Ich weiß noch nicht, wie man die Höhe bestimmt, aber Sie können dies verwenden, um etwas auf den Boden zu legen:

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

1

Vertrauen Sie mir, ich habe die HTML- und CSS-Ressourcen in diesem Fall erschöpft. Ich kann es nicht erklären, aber Sie werden die Probleme sehen, wenn Sie dies auf diesen Websites versuchen.

Nic

-4

Fügen Sie Referenzen richtig hinzu

In meinem Fall habe ich eine ASCX-Seite verwendet und die Aspx-Seite, die das ASCX-Steuerelement enthält, verwendet die Referenzen nicht richtig. Ich habe gerade den folgenden Code eingefügt und es hat funktioniert:

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

Tosh
quelle

Wie erhalte ich mit JavaScript die Höhe des gesamten Dokuments?

Antworten:

Ein Arbeitsbeispiel: