Wie berechnet man die Dokumenthöhe in JavaScript browserübergreifend genau?

Berechnen der Dokumenthöhe in JavaScript: Beheben von Kompatibilitätsproblemen

Die Bestimmung der Höhe eines Dokuments ist für verschiedene Szenarien, wie z. B. die absolute Positionierung von Elementen, von entscheidender Bedeutung . Bestimmte Dokumente stellen jedoch Herausforderungen dar, die bei Verwendung von Standardmethoden zu Diskrepanzen oder falschen Werten führen.

Zwei problematische Fälle sind Fandango und Paperback Swap:

• Bei Fandango $(Dokument). height() gibt den korrekten Wert zurück, während document.height und document.body.scrollHeight beide 0 sind.
• Bei Paperback Swap, $(document).height() löst einen Fehler aus und sowohl document.height als auch document.body.scrollHeight geben falsche Werte zurück.

Der Grund für diese Inkonsistenzen liegt in der Tatsache, dass verschiedene Browser Dokumente berechnen Größe unterschiedlich. Um dieses Problem anzugehen, muss die folgende Formel angewendet werden:

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

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

Dieser Ansatz stellt sicher, dass der höchste Wert für die Höhe erhalten wird, unabhängig vom verwendeten Browser.

Das ist wichtig Beachten Sie, dass das Testen der Höhe des Dokuments vor dem vollständigen Laden immer einen Wert von 0 ergibt. Darüber hinaus kann es bei späteren Änderungen am Dokument oder bei der Größenänderung des Fensters erforderlich sein, die Höhe neu zu berechnen. Um solche Szenarien zu bewältigen, nutzen Sie die Onload- oder Document-Ready-Ereignisse.

Das obige ist der detaillierte Inhalt vonWie berechnet man die Dokumenthöhe in JavaScript browserübergreifend genau?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!