JavaScript - Obtenir la hauteur du navigateur

Question

Je recherche un extrait de code pour obtenir la hauteur de la zone visible dans une fenêtre de navigateur.

J'ai eu ce code, cependant il est un peu buggé comme si le corps ne dépasse pas la hauteur de la fenêtre alors il revient court.

 document.body.clientHeight;
 

J'ai essayé deux ou trois autres choses, mais elles renvoient soit NaN, soit la même hauteur que ci-dessus.

Est-ce que quelqu'un sait comment obtenir la hauteur réelle de la fenêtre de navigation?

Answer 1

Vous voudrez quelque chose comme ça, tiré de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

 function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}
 

C’est donc innerHeight pour les navigateurs modernes, documentElement.clientHeight pour IE, body.clientHeight pour obsolètes / bizarreries.

Answer 2

Essayez d'utiliser jquery:

 window_size = $(window).height();
 

Answer 3

Vous pouvez utiliser les window.innerHeight

Answer 4

La façon dont j'aime le faire est comme ça avec une mission tertiaire.

  var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
 var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
 

Je pourrais souligner que, si vous exécutez ceci dans le contexte global, vous pouvez utiliser window.height et window.width à partir de ce moment-là.

Fonctionne sur IE et d'autres navigateurs pour autant que je sache (je ne l'ai testé que sur IE11).

Super propre et, si je ne me trompe pas, efficace.

~ techdude

Answer 5

Cela devrait fonctionner aussi. Commencez par créer un élément div absolu avec une position absolue et une hauteur de 100%:

 <div id="h" style="position:absolute;top:0;bottom:0;"></div>
 

Ensuite, obtenez la hauteur de la fenêtre de cet élément via offsetHeight

 var winHeight = document.getElementById('h').offsetHeight;