在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（跨浏览器）中获取页面高度

回答

相关问题