在JS（跨瀏覽器）中獲取頁面高度

在跨瀏覽器兼容的JS中獲得實際頁面（而非窗口）高度的最佳方式是什麼？在JS（跨瀏覽器）中獲取頁面高度

我已經看到了一些辦法，但他們都返回不同的值...

self.innerHeight 或 document.documentElement.clientHeight 或 document.body.clientHeight 或其他什麼東西？做這似乎工作的

一種方法是：

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

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

來源

2012-02-24 Boris Bachovski

可能重複（HTTP：//計算器.com/questions/1145850/get-height-of-entire-document-with-javascript） – 2012-02-24 11:38:19

應該這樣做。謝謝Felix。 – 2012-02-24 11:53:01

你有使用jQuery的能力嗎？如果是這樣，這裏的答案可能會對你有所幫助：http://stackoverflow.com/a/1304384/104435 – soniiic 2012-02-24 11:37:18

試試這個沒有jQuery的

//Get height 
var myWidth = 0, myHeight = 0; 
if (typeof (window.innerWidth) == 'number') { 
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight; 
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight; 
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { 
    myWidth = document.body.clientWidth; 
    myHeight = document.body.clientHeight; 
}

希望這有助於你。

來源

2012-02-24 11:39:41

試過，剛纔在這個特定的頁面上的螢火蟲返回456px高度這是不正確的... – 2012-02-24 11:44:27

@ e-bacho2.0再試一次，並彈出你的螢火蟲窗口。我得到了與$（window）.height（）相同的值;'<=這是jQuery（哪個是正確的）'705'。 – 2012-02-24 11:48:39

var width = window.innerWidth || 
      html.clientWidth || 
      body.clientWidth || 
      screen.availWidth; 

var height = window.innerHeight || 
      html.clientHeight || 
      body.clientHeight || 
      screen.availHeight;

應該是一個不錯的&乾淨的方式來實現它。

來源

2012-02-24 12:04:30 Jonas

無法正常工作......迄今爲止我找到的唯一解決方案，它正常工作的是我的問題。 – 2012-02-24 12:13:33

那麼，我不知道你是如何測試它......但我在所有主流瀏覽器（Chrome，Firefox，Opera，IE9 +）js控制檯中都運行它，並且它工作得很好。 – Jonas 2012-02-24 12:23:32

ty非jQuery解決方案 – 2014-09-16 09:55:46

頁面/文檔高度目前受制於供應商（IE/Moz/Apple/...）實施，並且沒有標準且一致的跨瀏覽器結果。看看jQuery .height（）方法;

if (jQuery.isWindow(elem)) { 
      // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode 
      // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat 
      var docElemProp = elem.document.documentElement[ "client" + name ], 
       body = elem.document.body; 
      return elem.document.compatMode === "CSS1Compat" && docElemProp || 
       body && body[ "client" + name ] || docElemProp; 

     // Get document width or height 
     } else if (elem.nodeType === 9) { 
      // Either scroll[Width/Height] or offset[Width/Height], whichever is greater 
      return Math.max(
       elem.documentElement["client" + name], 
       elem.body["scroll" + name], elem.documentElement["scroll" + name], 
       elem.body["offset" + name], elem.documentElement["offset" + name] 
      );

節點類型=== 9平均DOCUMENT_NODE：http://www.javascriptkit.com/domref/nodetype.shtml 所以沒有jQuery代碼的解決方案應該是這樣的：

var height = Math.max(
        elem.documentElement.clientHeight, 
        elem.body.scrollHeight, elem.documentElement.scrollHeight, 
        elem.body.offsetHeight, elem.documentElement.offsetHeight)

[使用JavaScript整個文檔的獲取高度]的

來源

2012-02-24 12:19:02 Krilivye

您正在發佈和Amar相同的答案。你能否在螢火蟲中運行該代碼，提醒高度並告訴我結果是否正確？ – 2012-02-24 12:23:40

Amar解決方案和以前我的應用於「窗口」瀏覽器對象。 – Krilivye 2012-02-24 12:27:19

在JS（跨瀏覽器）中獲取頁面高度

回答

相關問題