JavaScript - получить высоту браузера

Я ищу фрагмент кода, чтобы получить высоту видимой области в окне браузера.

У меня был этот код, однако он несколько искажен, как если бы тело не превышало высоту окна, а затем возвращалось.

document.body.clientHeight;

Я пробовал пару других вещей, но они либо возвращают NaN, либо ту же высоту, что и выше.

Кто-нибудь знает, как получить реальную высоту окна просмотра?

Ответ 1

Вам нужно что-то подобное, взятое из 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 );
}

Итак, innerHeight для современных браузеров documentElement.clientHeight для IE, body.clientHeight для устаревших/quirks.

Ответ 2

Попробуйте использовать jquery:

window_size = $(window).height();

Ответ 3

Вы можете использовать window.innerHeight

Ответ 4

Способ, которым я хотел бы это сделать, выглядит так: тройное назначение.

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

Я мог бы указать, что если вы запустите это в глобальном контексте, с этого момента вы можете использовать window.height и window.width.

Работает на IE и других браузерах, насколько я знаю (я только тестировал его на IE11).

Супер чистый и, если я не ошибаюсь, эффективен.

Ответ 5

Там проще, чем целая группа операторов if. Используйте оператор or (||).

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);

Ответ 6

Это тоже должно работать. Сначала создайте абсолютный элемент div с абсолютным положением и высотой 100%:

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

Затем получите высоту окна из этого элемента через offsetHeight

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

Ответ 7

Я предпочитаю, как я только что понял... Нет JS... 100% HTML и CSS:

(Будет центрировать его идеально посередине, независимо от размера содержимого.

ФАЙЛ HTML

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

ФАЙЛ CSS

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

для центрирования изображений /div, удерживаемых в пределах td, вы можете попробовать маркер: auto; и вместо этого укажите размер div. -То, говоря, что... свойство text-align будет выровнять намного больше, чем просто простой текстовый элемент.

Ответ 8

Версия JavaScript в случае, если jQuery не является опцией.

window.screen.availHeight

Ответ 9

var winWidth = window.screen.width;
var winHeight = window.screen.height;

document.write(winWidth, winHeight);

Ответ 10

С помощью JQuery вы можете попробовать этот $(window).innerHeight() (работает для меня в Chrome, FF и IE). С bootstrap modal я использовал что-то вроде следующего:

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