Comment puis-je déterminer de manière fiable la hauteur d'un document Web en JavaScript sur différents navigateurs ?

Détermination de la hauteur d'un document avec JavaScript : dévoilement des défis multi-navigateurs

Dans certains documents Web, récupérer la hauteur à l'aide de méthodes standard pose un défi. Ce problème est encore aggravé par l’inefficacité du remplissage du bas du document. Prenez, par exemple, les sites Web fandango.com et paperbackswap.com :

Sur fandango.com :

• $(document).height() de jQuery fournit la valeur correcte.
• document.height renvoie 0.
• document.body.scrollHeight renvoie 0.

Sur paperbackswap.com :

• $(document).height() de jQuery renvoie une TypeError : $(document) is null.
• document.height renvoie une valeur incorrecte.
• document.body.scrollHeight renvoie une valeur incorrecte. value.

Le calcul de la hauteur du document dans tous les navigateurs est un cauchemar en matière de compatibilité. Bien que tous les navigateurs proposent les propriétés clientHeight et scrollHeight, ils diffèrent par leurs méthodes de calcul.

Meilleures pratiques pour une récupération précise de la hauteur
Le moyen le plus fiable d'obtenir la hauteur correcte du document est de rassembler toutes les valeurs de hauteur du document ou du documentElement et utilisez la plus haute. Cette approche est essentiellement utilisée par jQuery :

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

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

Cette méthode donne la hauteur correcte pour fandango.com et paperbackswap.com.

Précautions
Tentative pour récupérer la hauteur du document avant que le document ne soit complètement chargé, le résultat sera toujours 0. De plus, le chargement dynamique du contenu ou le redimensionnement de la fenêtre peuvent nécessiter un nouveau test. Surveillez ces événements et testez en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!