Wie kann ich die Höhe eines Webdokuments in JavaScript in verschiedenen Browsern zuverlässig bestimmen?

Bestimmen der Dokumenthöhe mit JavaScript: Browserübergreifende Herausforderungen aufdecken

In bestimmten Webdokumenten stellt das Abrufen der Höhe mit Standardmethoden eine Herausforderung dar. Dieses Problem wird noch dadurch verschärft, dass es unwirksam ist, den unteren Rand des Dokuments aufzufüllen. Nehmen Sie zum Beispiel die Websites fandango.com und paperbackswap.com:

Auf fandango.com:

• $(document).height() von jQuery liefert den korrekten Wert.
• document.height gibt 0 zurück.
• document.body.scrollHeight gibt 0 zurück 0.

Auf paperbackswap.com:

• $(document).height() von jQuery löst einen TypeError aus: $(document) ist null.
• document.height gibt einen falschen Wert zurück.
• document.body.scrollHeight gibt einen falschen Wert zurück ein falscher Wert.

Die Berechnung der Dokumenthöhe über verschiedene Browser hinweg ist ein Kompatibilitäts-Albtraum. Obwohl alle Browser die Eigenschaften „clientHeight“ und „scrollHeight“ bieten, unterscheiden sie sich in ihren Berechnungsmethoden.

Best Practice für die genaue Höhenabfrage
Der zuverlässigste Weg, die richtige Dokumenthöhe zu ermitteln, ist das Sammeln alle Höhenwerte aus document oder documentElement und verwenden Sie den höchsten. Dieser Ansatz wird im Wesentlichen von jQuery verwendet:

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

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

Diese Methode liefert die richtige Höhe sowohl für fandango.com als auch für paperbackswap.com.

Vorsichtsmaßnahmen
Versuch Das Abrufen der Dokumenthöhe, bevor das Dokument vollständig geladen ist, führt immer zu 0. Darüber hinaus kann das dynamische Laden von Inhalten oder das Ändern der Fenstergröße erforderlich sein erneut testen. Überwachen Sie diese Ereignisse und testen Sie entsprechend.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines Webdokuments in JavaScript in verschiedenen Browsern zuverlässig bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!