Comment puis-je déterminer de manière fiable la hauteur du document en JavaScript ?

Déterminer la hauteur d'un document avec JavaScript

Obtenir la hauteur correcte d'un document en JavaScript peut être un défi en raison de problèmes de compatibilité du navigateur. Bien que tous les navigateurs fournissent des propriétés telles que clientHight et scrollHeight, leurs calculs varient.

Exemple d'échange de Fandango et de livre broché

Sur des sites Web comme Fandango et Paper Swap, les méthodes traditionnelles telles que $ (document).height(), document.height et document.body.scrollHeight échouent ou renvoient des résultats inexacts valeurs.

Bonne pratique : calcul de la hauteur maximale

Pour résoudre ce problème, une bonne pratique a émergé : déterminer la hauteur maximale à partir de toutes les sources disponibles. Ce comprend :

• document.body.scrollHeight
• document.body.offsetHeight
• document.documentElement.cli entHeight
• document.documentElement.scrollHeight
• document.documentElement.offsetHeight

Code Implémentation

L'exemple de code suivant implémente cette approche :

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

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

Considérations

• Le test de la hauteur du document avant que le document soit prêt entraînera un zéro.
• Le contenu dynamique ou le redimensionnement de la fenêtre peuvent nécessiter nouveau test.
• Utilisez onload ou un événement document ready pour les calculs initiaux ; sinon, testez si nécessaire.

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!