本文由 Jelon 翻译自 VIRAL PATEL 的jQuery window height is not correct。

jQuery-window-height

我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题。例如，我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度，就遇到了问题。

理论上，$(window).height() 会返回浏览器窗口的最小高度（译者注，注意是窗口高度），也就是当前浏览器当前窗口的高度。如果，你改变了窗口，这个高度值也会随之变化。

同理，你可以用 $(document).height() ，这个方法可以返回已渲染
之后页面的高度。当网页的高度小于窗口可视区域的高度时，这个方法会返回的是可视区域的高度值。也就是说，当页面的内容很少、窗口大于内容所需要的空间的时候，网页高度会比 jQuery 浏览器高度要小。

问题

但是最近在使用这两个值得时候，好像 $(window).height() 和 $(document).height() 得到的是一样的值。明显，$(window).height() 返回了一个不正确的值。

源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>


<script type='text/javascript'>

$(document).ready(function(){
    $('#winheight').text($(window).height());
    $('#docheight').text($(document).height());
});

</script>
</head>
<body>
  <div id="console">
    $(window).height() = <span id="winheight"></span> <br/>
    $(document).height() = <span id="docheight"></span>
</div>

<p>Lorem ipsum dolor sit amet, ...
</body>
</html>

结果如下：

1
2
3
4
5
6
7
8
9
10
11
$(window).height() = 672 
$(document).height() = 672
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate faucibus orci sit amet iaculis. Etiam at libero mi. Cras aliquet leo in turpis sollicitudin, pellentesque tincidunt orci pellentesque. Aenean dictum lobortis aliquet. Nullam blandit rhoncus orci, posuere facilisis nibh placerat et. Etiam sed justo vel nisl molestie rutrum in eu ipsum. Etiam sed mattis erat, vitae malesuada metus. Nulla accumsan facilisis ligula, sit amet faucibus enim ullamcorper id. Praesent sodales dictum ipsum nec vehicula. In hac habitasse platea dictumst. Integer euismod ante euismod metus convallis consectetur. Aliquam id urna sit amet ligula tempor fermentum. Integer tincidunt elementum nunc, sit amet scelerisque enim iaculis a. Cras sed pharetra enim, sed bibendum massa. Aliquam laoreet elit ac placerat pellentesque.

Pellentesque ullamcorper et lectus quis adipiscing. Phasellus fringilla diam augue, nec mattis ipsum porta ac. Nulla feugiat venenatis sapien, quis interdum nisi iaculis sit amet. Maecenas aliquet enim in arcu tincidunt, tincidunt porttitor arcu eleifend. Sed lobortis quam non purus interdum, eu lacinia lacus vehicula. Pellentesque et augue laoreet, mattis leo vel, congue enim. Ut fringilla erat vitae urna tincidunt porta. Curabitur scelerisque lorem id sagittis imperdiet.

Ut convallis justo id urna congue ultrices. Integer placerat mollis sem, sit amet faucibus purus consectetur eget. Fusce porta pellentesque nisi id lacinia. Etiam bibendum tempus tortor, sit amet lobortis mi adipiscing vel. Curabitur feugiat, lacus nec ornare fermentum, velit leo pulvinar neque, eu fermentum eros orci a lectus. Quisque ligula erat, auctor lacinia neque id, aliquet eleifend magna. Aliquam iaculis placerat aliquet.

Morbi a luctus nisl, commodo sagittis dolor. Proin sit amet libero quam. Fusce mattis egestas sapien, quis vulputate sapien commodo sed. Donec neque erat, feugiat nec quam nec, facilisis tempus leo. Vivamus auctor bibendum elit eu consequat. Mauris blandit est lectus, quis accumsan purus hendrerit a. Phasellus nec nisi in justo condimentum euismod. Pellentesque id arcu nunc. Phasellus in libero nec justo faucibus sollicitudin in eu massa. Vivamus faucibus purus libero, eu posuere orci tristique consectetur. Quisque urna sapien, sodales eget quam nec, sodales interdum felis. Vivamus dapibus justo eget augue malesuada, at laoreet nibh dapibus.

Donec accumsan tellus dolor, in fermentum sem egestas non. Maecenas elementum eget metus eu consequat. Nulla vel ipsum non risus interdum consectetur. Phasellus convallis in leo rhoncus viverra. Mauris consectetur in diam et pretium. Etiam bibendum elit at iaculis cursus. Vestibulum ac ligula nec odio suscipit laoreet eu eget nisl. Quisque adipiscing nunc sed mi luctus faucibus. Ut quis nisi ac ipsum venenatis sodales.

神马？！结果 $(window).height() 和 $(document).height() 竟然都返回750。窗口高度不应该是这个值，而应该是200px。很明显，页面document会更大一些，因为它有滚动条。

那么问题来了，为神马 jQuery 对于 window 和 document 都得到一样的高度？事实上，少了某个简单的东西。

解决

因为我们的 HTML 页面里面没有做 DOCTYPE 声明，所以可以这么说它不是一个有效的 HTML 。如果 doctype 没有指定文档类型，jQuery 也不会正确的计算 window height 和 document height 。<!DOCTYPE html> 声明不是一个HTML标签；它是什么版本的HTML页面是用Web浏览器的指令。

所以，我们就试一下，把这个指令加到html页面里面，然后看看结果怎么样。

代码如下：

1
2
3
4
5
<!DOCTYPE HTML>
<html>

//.. 
</html>

结果如下：

1
2
3
4
5
6
7
8
9
10
11
$(window).height() = 200 
$(document).height() = 672
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate faucibus orci sit amet iaculis. Etiam at libero mi. Cras aliquet leo in turpis sollicitudin, pellentesque tincidunt orci pellentesque. Aenean dictum lobortis aliquet. Nullam blandit rhoncus orci, posuere facilisis nibh placerat et. Etiam sed justo vel nisl molestie rutrum in eu ipsum. Etiam sed mattis erat, vitae malesuada metus. Nulla accumsan facilisis ligula, sit amet faucibus enim ullamcorper id. Praesent sodales dictum ipsum nec vehicula. In hac habitasse platea dictumst. Integer euismod ante euismod metus convallis consectetur. Aliquam id urna sit amet ligula tempor fermentum. Integer tincidunt elementum nunc, sit amet scelerisque enim iaculis a. Cras sed pharetra enim, sed bibendum massa. Aliquam laoreet elit ac placerat pellentesque.

Pellentesque ullamcorper et lectus quis adipiscing. Phasellus fringilla diam augue, nec mattis ipsum porta ac. Nulla feugiat venenatis sapien, quis interdum nisi iaculis sit amet. Maecenas aliquet enim in arcu tincidunt, tincidunt porttitor arcu eleifend. Sed lobortis quam non purus interdum, eu lacinia lacus vehicula. Pellentesque et augue laoreet, mattis leo vel, congue enim. Ut fringilla erat vitae urna tincidunt porta. Curabitur scelerisque lorem id sagittis imperdiet.

Ut convallis justo id urna congue ultrices. Integer placerat mollis sem, sit amet faucibus purus consectetur eget. Fusce porta pellentesque nisi id lacinia. Etiam bibendum tempus tortor, sit amet lobortis mi adipiscing vel. Curabitur feugiat, lacus nec ornare fermentum, velit leo pulvinar neque, eu fermentum eros orci a lectus. Quisque ligula erat, auctor lacinia neque id, aliquet eleifend magna. Aliquam iaculis placerat aliquet.

Morbi a luctus nisl, commodo sagittis dolor. Proin sit amet libero quam. Fusce mattis egestas sapien, quis vulputate sapien commodo sed. Donec neque erat, feugiat nec quam nec, facilisis tempus leo. Vivamus auctor bibendum elit eu consequat. Mauris blandit est lectus, quis accumsan purus hendrerit a. Phasellus nec nisi in justo condimentum euismod. Pellentesque id arcu nunc. Phasellus in libero nec justo faucibus sollicitudin in eu massa. Vivamus faucibus purus libero, eu posuere orci tristique consectetur. Quisque urna sapien, sodales eget quam nec, sodales interdum felis. Vivamus dapibus justo eget augue malesuada, at laoreet nibh dapibus.

Donec accumsan tellus dolor, in fermentum sem egestas non. Maecenas elementum eget metus eu consequat. Nulla vel ipsum non risus interdum consectetur. Phasellus convallis in leo rhoncus viverra. Mauris consectetur in diam et pretium. Etiam bibendum elit at iaculis cursus. Vestibulum ac ligula nec odio suscipit laoreet eu eget nisl. Quisque adipiscing nunc sed mi luctus faucibus. Ut quis nisi ac ipsum venenatis sodales.

哇擦，居然真行。所以呀，不要忘记在你的 html 页面加上 DOCTYPE 声明。最好使用一些 IDE 编辑器什么的帮你去创建 html 文件，因为这些编辑器会自动帮你检查这个。