如何使用JavaScript獲取整個文檔的高度?

本文翻譯自:How to get height of entire document with JavaScript?

Some documents I can't get the height of the document (to position something absolutely at the very bottom). 有些文檔我無法獲取文檔的高度(將某些內容絕對定位在最底部)。 Additionally, a padding-bottom on seems to do nothing on these pages, but do on the pages where height will return. 此外,在這些頁面上的底部填充似乎沒有任何作用,但在高度會返回的頁面上卻沒有作用。 Case(s) in point: 案例:

http://fandango.com http://fandango.com
http://paperbackswap.com http://paperbackswap.com

On Fandango 在Fandango
jQuery's $(document).height(); jQuery的$(document).height(); returns correct value 返回正確的值
document.height returns 0 document.height返回0
document.body.scrollHeight returns 0 document.body.scrollHeight返回0

On Paperback Swap: 在平裝交換上:
jQuery's $(document).height(); jQuery的$(document).height(); TypeError: $(document) is null TypeError: $(document)爲null
document.height returns an incorrect value document.height返回不正確的值
document.body.scrollHeight returns an incorrect value document.body.scrollHeight返回不正確的值

Note: I have browser level permissions, if there is some trick there. 注意:如果有一些竅門,我具有瀏覽器級別的權限。


#1樓

參考:https://stackoom.com/question/4o5S/如何使用JavaScript獲取整個文檔的高度


#2樓

I don't know about determining height just now, but you can use this to put something on the bottom: 我現在不知道確定高度,但是您可以使用它在底部放置一些東西:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

#3樓

我撒謊了,jQuery爲兩個頁面都返回了正確的值$(document).height(); ...爲什麼我對此表示懷疑?


#4樓

Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree how the values are calculated. 文檔大小是瀏覽器兼容性的噩夢,因爲儘管所有瀏覽器都公開了clientHeight和scrollHeight屬性,但是它們並不都同意如何計算值。

There used to be a complex best-practice formula around for how you tested for correct height/width. 關於如何測試正確的高度/寬度,曾經有一個複雜的最佳實踐公式。 This involved using document.documentElement properties if available or falling back on document properties and so on. 這涉及使用document.documentElement屬性(如果可用)或依靠文檔屬性等。

The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. 獲取正確高度的最簡單方法是獲取文檔或documentElement上找到的所有高度值,並使用最高的值。 This is basically what jQuery does: 基本上,這就是jQuery的作用:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

A quick test with Firebug + jQuery bookmarklet returns the correct height for both cited pages, and so does the code example. 使用Firebug + jQuery小書籤進行的快速測試將爲兩個引用的頁面返回正確的高度,代碼示例也是如此。

Note that testing the height of the document before the document is ready will always result in a 0. Also, if you load more stuff in, or the user resizes the window, you may need to re-test. 請注意,在文檔準備就緒之前測試文檔的高度將始終爲0。此外,如果您在其中加載了更多內容,或者用戶調整了窗口的大小,則可能需要重新測試。 Use onload or a document ready event if you need this at load time, otherwise just test whenever you need the number. 如果需要在加載時使用onload文檔就緒事件,請在需要該數字時進行測試。


#5樓

You can even use this: 您甚至可以使用以下命令:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

or in a more jQuery way (since as you said jQuery doesn't lie) :) 或採用更多jQuery方式(因爲您說過jQuery不會說謊):)

Math.max($(document).height(), $(window).height())

#6樓

Add References properly 正確添加參考

In my case I was using a ASCX page and the aspx page that contains the ascx control is not using the references properly. 就我而言,我使用的是ASCX頁面,而包含ascx控件的aspx頁面未正確使用引用。 I just pasted the following code and it worked : 我只是粘貼了以下代碼,它的工作原理是:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章