Javascript – Hauteur Navigateur (Comparatif)

2 juillet 2008 par: Benoit Bonneville

Update 2012
Maintenant le framework jquery vous permet d’obtenir un résultat valide.
Vous pouvez utiliser :

$(document).width();
$(document).height();

Ou

$(window).width();
$(window).height();

Article Original:

Voici une aide en JavaScript, nécéssaire vu le manque de normalisation pour ce language et la documentation plus qu’insufisante.

Il s’agit d’une explication sur la manière de récuperer :
les largeurs (width) et hauteurs(height) des divers navigateur web de manière simple et efficace sur l’ensemble des navigateurs du marché actuel :
Internet Explorer 6 et Internet Explorer 7, Firefox , Opera et Safari

// Update 2009-10-09

Suite à un poste sur le forum du site du zéro, j’ai testé à nouveau le calcul de la hauteur du document avec des éléments en absolue sous Internet Explorer 7. 
Cela fonctionne bien à condition que vos blocs positionnés en absolus contiennent quelque-chose : du texte, une image …


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 :

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.

Firefox 2 et 3 Internet Explorer 7 Internet Explorer 6 Safari 3.1.1 Chrome 0.2 Opera 9.5
 window.innerHeight window undefined
undefined window window window
 document.documentElement.clientHeight window window window window window window
 document.documentElement.offsetHeight document+ window ~window document+ document+ document+
 document.documentElement.scrollHeight min-window
Absolute
document+
Absolute
document+
Absolute
document+
document+ document+ Absolute
document+
 document.body.clientHeight document document document document document document
 document.body.offsetHeight document document document document document document
 document.body.scrollHeight document document document Min-Window
Absolute
document
Min-Window
Absolute
document
document

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.

Cet article est une nouvelle version du précédent article a présent supprimé, car il c’est révelé inexact après divers tests pratique.

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…


Mise à jour Octobre 2009 : Vérification IE 7 + blocs en absolue pour la fonction  document.documentElement.scrollHeight. Ceci est toujours bon.

Filed under: Développement

Commentaires

9 commentaires à “Javascript – Hauteur Navigateur (Comparatif)”
  1. mickkael dit :

    Merci beaucoup, je viens de gagner 2 jours de travail !

  2. Oneilos dit :

    GRAND merci, j’ai passé 3 heures à rechercher ces informations

  3. Loïs dit :

    Bonjour,

    Votre article est très intéressant et répondait à mes questions jusqu’à ce que je fasse moi-même mes tests.

    Tout d’abord, mon besoin est de récupérer la taille totale sous IE 7 de mon document, en sachant que de nombreux éléments sont placés en absolute du fait d’un fond en flash.

    Mon soucis est que j’ai testé toutes les méthodes et qu’elles me renvoient toutes la même hauteur (796) alors que mon document est beaucoup plus long.

    Si vous aviez la solution à mon problème, je vous laisse mon adresse e-mail pour me contacter.

    Merci d’avance.

  4. benoit dit :

    Je voulais savoir si votre problème persistai toujours.
    Je viens de réaliser différents tests sous IE 7, en plaçant un immense Flash avec des éléments en absolue, dont certains dépassent.
    les méthodes me renvoies des résultats différents, et c’est document.documentElement.scrollHeight qui remporte.

    J’ai aussi essayé en enlevant le DOCTYPE, c’est alors la méthode document.body.scrollHeight qui renvoie la hauteur totale.

  5. JPV dit :

    Super merci, moi aussi je cherchais et cherchais, et vous venez de me dépanner , encore merci !!!!

  6. Erwan dit :

    Belle analyse. Beau résultat.
    Merci beaucoup de les faire partager.

  7. anon dit :

    d’abord merci!

    ensuite tu pourrais rajouter les différences entre quirk et strict (document.body devient document.documentElement) pour certains navigateurs

  8. Pierre dit :

    Merci pour ces infos.
    Elles m’ont permis de m’en sortir après plus d’une journée de vaines recherches…

  9. Benoit dit :

    Maintenant je vous conseil d’utiliser jquery et de faire :
    $(document).width();
    $(document).height();

    Ce sera plus simple.

Répondre