Hauteur de navigateur de la fenêtre et de la barre de défillement

En javascript vous pouvez récuperer des informations sur le navigateur du client et sur la page qu’il navigue actuellement.
Il peut être interressant de savoir quelle est la hauteur de la page, ou de la fenêtre de navigation du client. les données étant exprimées en nombre de pixels

Le probleme ici proviens de la compatibilité des navigateurs, qui ne sont pas capable de s’accorder.

Le premier point à respecter pour accorder des Navigateurs Web (browser) est de travailler en XHTML STRICT, via le DOCTYPE. (plus d’explication sur le DOCTYPE ici)

liste des méthodes disponibles :

• window.innerHeight
• document.documentElement.clientHeight
• document.documentElement.offsetHeight
• document.documentElement.scrollHeight
• document.body.clientHeight
• document.body.offsetHeight
• document.body.scrollHeight

On peu clairement distingué 3 familles :

• window, qui vas informer sur la taille de la fenêtre du navigateur
• document.documentElement qui va infrmer sur la taille du document en entier
• document.body qui va nous informer sur la taille du HTML

Résultats et Tableau comparatif

Les navigateurs seront Firefox 2 et 3, Internet Explorer 6 & 7, Opera 9.5 et Safari 3.3.1. Explication sur le choix des navigateurs ici prochainement

Légende :

• window => nombre de pixels visible par l’utilisateur sur la fenêtre de son navigateur.
• document => nombre de pixels du code HTML SANS les marges de début et de fin.*
• document+ => nombre de pixels du code HTML AVEC les marges de début et de fin.*
• min-window => si « document » est inférieur à « windows », alors la valeur sera « window »
• Absolute les éléments avec l’attribut css « position:absolute » sont pris en compte dans le calcul de la hauteur. **

* Si le body a une marge ou si le premier élément et le dernier en a, elles sont comptées.

** Par défaut les éléments avec le positionnement CSS en absolue ne sont pas pris en compte.

Cas particuliers détaillés (on sait jamais cela peu aider quelqu’un)

• Sous Internet Explorer 6, ~window vaut window + 4 pixels, si quelqu’un sait pourquoi je suis preneur de l’explication.
• Dans le cas ou votre page est completement vide ,document.documentElement.scrollHeight sous IE 6 vaudrai ~window, sinon il vaut « document + » et « absolute » comme le tableau l’indique.
• Si votre page n’a pas de contenu mais votre body à une marge, Internet Explorer 6 et 7 multiplient cette marge par 2, alors que les autres ne la compte qu’une fois. par contre au moindre élément présent sur la page, les marges haute et basse sont comptées
  (donc margin:10px donne 20px sur un « document+ », qui est vide)

Conclusion

Les principales dimensions dont vous aurez surement besoins sont  :

• La hauteur de la fenêtre du navigateur => document.documentElement.clientHeight
• La hauteur totale =>ça ce corse :
  il faut prendre les éléments absolues et les marges des éléments de début et de fin avec comme taille minimum la fenêtre du navigateur.

  function getTotalHeight() {
  
    // firefox is ok
    var height = document.documentElement.scrollHeight;
  
    // now IE 7 + Opera with "min window"
    if(document.documentElement.clientHeight > height ) {
      height  = document.documentElement.clientHeight;
    }
    // last for safari
    if(document.body.scrollHeight > height) {
      height = document.body.scrollHeight;
    }
    return height;
  }

Nous pouvons aussi conclure que Safari considère les objets en position absolues dans document.body alors que les autres navigateurs le considère dans document.documentElement.

Mise à jour Octobre 2008 : Ajout de Google Chrome 0.2, qui se comporte étrangement comme Safari, pourtant il n’est sensé en reprendre que le moteur Graphique WebKit et pas le moteur JavaScript…