it-swarm.com.de

JavaScript - Browserhöhe abrufen

Ich suche nach einem Codeausschnitt, um die Höhe des sichtbaren Bereichs in einem Browserfenster zu ermitteln.

Ich hatte diesen Code, aber es ist etwas verwirrt, als wenn der Körper die Höhe des Fensters nicht überschreitet, dann kommt es kurz zurück.

document.body.clientHeight;

Ich habe ein paar andere Dinge ausprobiert, aber sie geben entweder NaN oder die gleiche Höhe wie oben wieder.

Weiß jemand, wie man die tatsächliche Höhe des Browserfensters erhält?

48
JasonS

Sie möchten etwas Ähnliches aus 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 );
}

Das ist also innerHeight für moderne Browser, documentElement.clientHeight für IE, body.clientHeight für veraltete/Macken.

75
meder omuraliev

Versuchen Sie es mit Jquery:

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

Sie können den window.innerHeight verwenden

25

Die Art, wie ich es gerne mache, ist so mit einer ternären Aufgabe.

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

Ich möchte darauf hinweisen, dass Sie, wenn Sie dies im globalen Kontext ausführen, window.height und window.width verwenden können.

Funktioniert auf IE und anderen Browsern, soweit ich weiß (ich habe es nur auf IE11 getestet).

Super sauber und, wenn ich mich nicht irre, effizient.

16
techdude

Es gibt einen einfacheren Weg als eine ganze Reihe von if-Anweisungen. Verwenden Sie den Operator oder (||).

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

Das sollte auch funktionieren. Erstellen Sie zuerst ein absolutes <div>-Element mit absoluter Position und 100% Höhe:

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

Rufen Sie dann die Fensterhöhe von diesem Element über offsetHeight ab.

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

Update:

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

Mit JQuery können Sie diese $(window).innerHeight() (Funktioniert für mich in Chrome, FF und IE) ausprobieren. Mit Bootstrap Modal habe ich etwas wie das Folgende verwendet;

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

Ich bevorzuge die Art und Weise, wie ich es gerade herausgefunden habe ... Nein JS ... 100% HTML & CSS:

(Zentriert es perfekt in der Mitte, unabhängig von der Inhaltsgröße.

HTML-DATEI

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

CSS-DATEI

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

für die Zentrierung von Bildern/Divs, die im td gespeichert sind, können Sie den Rand ausprobieren: auto; und geben Sie stattdessen eine div-Dimension an. Obwohl gesagt, dass ... die Eigenschaft 'text-align' viel mehr ausrichtet als nur ein einfaches Textelement.

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

document.write(winWidth, winHeight);
0
FrEaKi

JavaScript-Version für den Fall, dass jQuery keine Option ist.

window.screen.availHeight

0
Alexander C.