JavaScript - 获取浏览器高度

Jas*_*onS 50 javascript height window

我正在寻找一个代码片段来获取浏览器窗口中可视区域的高度.

我有这个代码,但它有点被窃听,好像身体没有超过窗口的高度然后它回来短.

document.body.clientHeight;
Run Code Online (Sandbox Code Playgroud)

我尝试过其他一些东西,但它们要么返回NaN,要么与上面相同.

有谁知道如何获得浏览窗口的真实高度?

med*_*iev 77

你会想要这样的东西,取自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 );
}
Run Code Online (Sandbox Code Playgroud)

因此,innerHeight对于现代浏览器,documentElement.clientHeight对于IE,body.clientHeight对于已弃用/怪癖.


Doc*_*PHP 45

尝试使用jquery:

window_size = $(window).height();
Run Code Online (Sandbox Code Playgroud)


Gab*_*oli 27

你可以使用 window.innerHeight

  • 我们不需要支持Internet Explorer :)如果必须,请尝试使用document.documentElement.clientHeight或使用jquery. (22认同)
  • -1 Internet Explorer不支持此功能. (9认同)

tec*_*ude 16

我喜欢这样做的方式是这样的三元作业.

 var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
 var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
Run Code Online (Sandbox Code Playgroud)

我可能会指出,如果你在全局上下文中运行它,从那时起你可以使用window.height和window.width.

据我所知,在IE和其他浏览器上工作(我只在IE11上测试过).

超级干净,如果我没有弄错,效率很高.