JavaScript - 获取浏览器高度

发布于 2024-09-11 13:15:00 字数 206 浏览 19 评论 0原文

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

我有这段代码,但是它有些问题,好像主体没有超过窗口的高度,然后它会变短。

document.body.clientHeight;

我尝试了其他一些方法,但它们要么返回 NaN,要么返回与上面相同的高度。

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

I am looking for a code snippet to get the height of the viewable area within a browser window.

I had this code, however it is somewhat bugged as if the the body doesn't exceed the height the of the window then it comes back short.

document.body.clientHeight;

I have tried a couple of other things but they either return NaN or the same height as the above.

Does anyone know how to get the real height of the browsing window?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(10

别闹i 2024-09-18 13:15:00

你会想要这样的东西,取自 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,IE 为 documentElement.clientHeight,已弃用的为 body.clientHeight/怪癖。

You'll want something like this, taken from 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 );
}

So that's innerHeight for modern browsers, documentElement.clientHeight for IE, body.clientHeight for deprecated/quirks.

把人绕傻吧 2024-09-18 13:15:00

尝试使用jquery:

window_size = $(window).height();

Try using jquery:

window_size = $(window).height();
转角预定愛 2024-09-18 13:15:00

您可以使用window.innerHeight

You can use the window.innerHeight

﹉夏雨初晴づ 2024-09-18 13:15:00

我喜欢这样做的方式是这样的三元赋值。

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

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

据我所知,适用于 IE 和其他浏览器(我只在 IE11 上测试过)。

超级干净,如果我没记错的话,效率很高。

The way that I like to do it is like this with a ternary assignment.

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

I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.

Works on IE and other browsers as far as I know (I have only tested it on IE11).

Super clean and, if I am not mistaken, efficient.

半﹌身腐败 2024-09-18 13:15:00

有一种比一大堆 if 语句更简单的方法。使用或 (||) 运算符。

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

There's a simpler way than a whole bunch of if statements. Use the or (||) operator.

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);
屌丝范 2024-09-18 13:15:00

这应该也有效。首先创建一个具有绝对位置和 100% 高度的绝对

元素:

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

然后,通过 offsetHeight 从该元素获取窗口高度

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

更新:

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

This should works too. First create an absolute <div> element with absolute position and 100% height:

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

Then, get the window height from that element via offsetHeight

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());
冷…雨湿花 2024-09-18 13:15:00
var winWidth = window.screen.width;
var winHeight = window.screen.height;

document.write(winWidth, winHeight);
var winWidth = window.screen.width;
var winHeight = window.screen.height;

document.write(winWidth, winHeight);
暮色兮凉城 2024-09-18 13:15:00

使用 JQuery,您可以尝试这个 $(window).innerHeight() (适用于 Chrome、FF 和 IE)。对于引导模式,我使用了类似以下的内容;

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

With JQuery you can try this $(window).innerHeight() (Works for me on Chrome, FF and IE). With bootstrap modal I used something like the following;

$('#YourModal').on('show.bs.modal', function () {
    $('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
为你拒绝所有暧昧 2024-09-18 13:15:00

我更喜欢我刚刚想到的方式...没有 JS...100% HTML & 100% HTML CSS:(

无论内容大小如何,都会将其完美居中。

HTML FILE

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

CSS FILE

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

用于将 td 内的图像/div 居中,您不妨尝试一下margin:auto; 并指定一个 div 尺寸 - 但是,'text-align' 属性将不仅仅对齐一个简单的文本元素。

I prefer the way I just figured out... No JS... 100% HTML & CSS:

(Will center it perfectly in the middle, regardless of the content size.

HTML FILE

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

CSS FILE

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

for centering images / div's held within the td, you may wish to try margin:auto; and specify a div dimension instead. -Though, saying that... the 'text-align' property will align much more than just a simple text element.

谈下烟灰 2024-09-18 13:15:00

JavaScript 版本,如果 jQuery 不是一个选项:

window.screen.availHeight

JavaScript version in case if jQuery is not an option:

window.screen.availHeight
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文