web-dev-qa-db-fra.com

JavaScript - Obtenir la hauteur du navigateur

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?

javascriptwindowheight
48
JasonS

Vous voudrez quelque chose comme ceci, 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 );
}

Donc, c'est innerHeight pour les navigateurs modernes, documentElement.clientHeight pour IE, body.clientHeight pour obsolètes/obsolètes.

75
meder omuraliev

Essayez d'utiliser jquery:

window_size = $(window).height();
44
Doc B PHP

Vous pouvez utiliser le window.innerHeight

25
Gabriele Petrioli

La façon dont j'aime le faire est comme cela avec une affectation ternaire.

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

Je pourrais faire remarquer que, si vous utilisez ceci dans le contexte global, vous pouvez utiliser window.height et window.width.

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

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

16
techdude

Il existe un moyen plus simple que tout un tas de déclarations if. Utilisez l'opérateur ou (||).

function getBrowserDimensions() {
  return {
    width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
    height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
  };
}

var browser_dims = getBrowserDimensions();

alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);
3
Tanny O'Haley

Cela devrait fonctionner aussi. Commencez par créer un élément absolu <div> 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 à partir de cet élément via offsetHeight

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

Mettre à jour: 

function getBrowserSize() {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = 0;
    div.style.left = 0;
    div.style.width = '100%';
    div.style.height = '100%';
    document.documentElement.appendChild(div);
    var results = {
        width: div.offsetWidth,
        height: div.offsetHeight
    };
    div.parentNode.removeChild(div); // remove the `div`
    return results;
}

console.log(getBrowserSize());
3
Taufik Nurrohman

Avec JQuery, vous pouvez essayer cette $(window).innerHeight() (fonctionne pour moi sur Chrome, FF et IE). Avec bootstrap modal, j'ai utilisé quelque chose comme ce qui suit:

$('#YourModal').on('show.bs.modal', function () {
    $('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
0
Mahib

Je préfère la façon dont je viens de comprendre ... No JS ... 100% HTML & CSS:

(Le centrera parfaitement au milieu, quelle que soit la taille du contenu.

FICHIER HTML 

<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>

FICHIER CSS 

#container{
    border:0;
    width:100%;
    height:100%;
}
#centerpiece{
    vertical-align:middle;
    text-align:center;
}

pour centrer les images/divs détenues dans le td, vous pouvez essayer margin: auto; et spécifiez une dimension div à la place. -Bien entendu, en disant que ... la propriété 'text-align' alignera bien plus qu'un simple élément de texte.

0
josh.thomson
var winWidth = window.screen.width;
var winHeight = window.screen.height;

document.write(winWidth, winHeight);
0
FrEaKi

Version JavaScript au cas où jQuery ne serait pas une option.

window.screen.availHeight

0
Alexander C.