如何使用JavaScript获取整个文档的高度？

333

有些文档我无法获取文档的高度（将某些内容绝对定位在最底部）。此外，在这些页面上的底部填充似乎没有任何作用，但在高度会返回的页面上却没有作用。案例：

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

在Fandango上，
jQuery的$(document).height();返回正确值
document.height返回0
document.body.scrollHeight返回0

关于平装书交换：
jQuery的$(document).height();TypeError：$(document)为null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意：如果有一些技巧，我具有浏览器级别的权限。

javascript 
— 尼克
source
5
$（document）为null，因为该站点未加载jQuery ...
— James
嗯，可能发誓我检查了其他内容以确认jQuery已注册，但看起来不像我那样，哈哈！我以为Firebug打包了jQuery ...嗯，我想我可以检查一下是否可以解决。
— Nic
4
萤火虫没有打包jQUery
— harsimranb 2012年
请参阅查找浏览器窗口的大小。它具有不同浏览器行为的详尽表。
— Oriol 2015年

Answers:

670

文档大小是浏览器兼容性的噩梦，因为尽管所有浏览器都公开clientHeight和scrollHeight属性，但它们并不都同意如何计算值。

关于如何测试正确的高度/宽度，曾经有一个复杂的最佳实践公式。这涉及使用document.documentElement属性（如果可用）或依靠文档属性等。

获取正确高度的最简单方法是获取在document或documentElement上找到的所有高度值，并使用最高的值。基本上，这就是jQuery的作用：

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

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

使用Firebug + jQuery小书签进行的快速测试可以为两个引用的页面返回正确的高度，代码示例也是如此。

请注意，在文档准备就绪之前测试文档的高度将始终为0。此外，如果您在其中加载了更多内容，或者用户调整了窗口的大小，则可能需要重新测试。如果在加载时需要此事件，则使用onload或文档就绪事件，否则，只要需要此编号，就进行测试。

— 博尔加
source
2
对这个解决方案进行评分，因为它在使用原型库时有效，而使用jQuery则没有此类问题
— se_pavel
10
使用iframe和jquery时，由于采用这种计算方法，因此iframe的文档高度始终至少应为iframe本身的高度。当您要降低iframe的高度以匹配内容时，请务必注意这一点。您首先必须重置iframe的高度。
— David Lay
3
我需要增加iframe并缩小它（facebook应用程序），发现document.body.offsetHeight是我的最佳选择，大多数浏览器都准确地支持该文件。
— JeffG
1
很好，虽然如果文档未准备好也可能产生不正确的结果，即在服务器生成的代码中使用时……
— stuartdotnet 2012年
1
在准备就绪之前测试文档将无法正常工作。这与生成的代码/文档无关，而是与文档的加载方式无关。该测试必须在文档准备就绪后运行，我建议仅在文档完全加载后才运行该测试，因为其余项目可能会影响高度，并调整浏览器的大小。
— 博尔加2012年
213

这是一个非常老的问题，因此有许多过时的答案。截至2020年，所有主要浏览器均已遵守该标准。

2020年答案：

document.body.scrollHeight

编辑：上面没有考虑<body>标签上的边距。如果您的身体有边缘，请使用：

document.documentElement.scrollHeight
— 马奎佐
source
嗯-现在我测试了它并且可以正常工作-我不知道为什么-很好:)-我删除了之前的评论
— 卡米尔·基列夫斯基（KamilKiełczewski）17-6-28
6
截至2017年，这应该被标记为对我的正确答案。
— 2017年
@Joan取决于原始海报来决定:)
— Marquizzo
在存在边距的情况下不起作用。document.documentElement.getBoundingClientRect()效果更好。
— torvin
3
这样做有一个错误：例如说，在<h1>元素的开头有一个元素，<body>其默认边距是默认值，它将把<body>元素向下推，而无法检测到它。document.documentElement.scrollHeight（不是document.body,scrollHeight）是最准确的处事方式。这适用于身体边缘和身体内部的东西边缘将其向下推。
— 伊桑（Ethan）'18年
29

您甚至可以使用以下命令：

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

或采用更多jQuery方式（因为您说过jQuery不会说谎）：）

Math.max($(document).height(), $(window).height())
— 米莫
source
24

完整文档高度计算：

为了更通用并找到任何文档的高度，您可以通过简单的递归在当前页面上找到最高的DOM节点：

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

您可以在示例站点（http://fandango.com/或http://paperbackswap.com/）上对其进行测试，并将此脚本粘贴到DevTools Console中。

注意：它正在使用Iframes。

请享用！

— 安德烈（Andrii Verbytskyi）
source
2
这就像一个魅力！此处没有其他答案可以获取全高（包括可滚动区域），它们都只返回可见区域的高度。
— Martin Kristiansson
真的很特别，没想到这一点。我猜只有一个在phantomjs中工作。
— MindlessRanger
6

确定文档大小的“ jQuery方法”（在所有情况下查询所有内容，获取最高价值并希望获得最佳效果）在大多数情况下都适用，但并非在所有情况下都适用。

如果您确实需要文档大小的防弹结果，建议您使用我的jQuery.documentSize插件。与其他方法不同，它实际上在加载时测试和评估浏览器的行为，并根据结果从那里查询正确的属性。

一次性测试对性能的影响很小，即使在最奇怪的情况下，该插件也能返回正确的结果-不是因为我这么说，而是因为一个庞大的，自动生成的测试套件实际上验证了它的有效性。

由于该插件是用原始Javascript编写的，因此您也可以在不使用jQuery的情况下使用它。

— 哈希变化
source
5

我撒谎了，jQuery返回两个页面的正确值$（document）.height（）; ...为什么我曾经对此表示怀疑？

— 尼克
source
1
不同的浏览器兄弟。
— jahrichie 2015年
4

2017年的正确答案是：

document.documentElement.getBoundingClientRect().height

与document.body.scrollHeight这种方法不同，它占了身体的边缘。它还提供了分数高度值，在某些情况下可能有用

— 托尔文
source
1
这些是我在此页面上尝试您的方法时得到的结果：i.imgur.com/0psVkIk.png您的方法返回类似于窗口高度的内容，同时document.body.scrollHeight列出了整个可滚动高度，这就是原始问题所要求的。
— Marquizzo
2
@Marquizzo这是因为此页面包含html { height: 100% }CSS。因此，API会正确返回实际计算出的高度。尝试删除此样式并添加空白body，您将看到使用的问题document.body.scrollHeight。
— torvin
这样做有一个错误：例如说，在<h1>元素的开头有一个元素，<body>其默认边距是默认值，它将把<body>元素向下推，而无法检测到它。document.documentElement.scrollHeight（不是document.body,scrollHeight）是最准确的处事方式。
— 伊桑（Ethan）'18年
@Booligoosh不确定您的意思。documentElement.scrollHeight在这种情况下给出错误的值。documentElement.getBoundingClientRect().height给出正确的。检查一下：jsfiddle.net/fLpqjsxd
— torvin
1
@torvin事实仍然是不会返回预期的结果getBoundingClientRect().height。它被旁白了，而其他3（三种）方法没有被旁白。包括您提到的劣于它的那个。而且您坚持这样做，建议从此页面的html高度中删除100％，并为其添加边距。重点是什么 ？只是接受那getBoundingClientRect().height也不是防弹的。
— 罗布·瓦
2

要以跨浏览器/设备的方式获取宽度，请使用：

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}
— 用户名
source
11
我们在谈论身高。不宽。
— Yash
0

对于使用功能检测无法按需滚动页面的任何人，我提供了此技巧来检测动画滚动中要使用的功能。

这个问题既存在，document.body.scrollTop并且在所有浏览器中document.documentElement始终返回true。

但是，您只能实际滚动一个文档或另一个文档。d.body.scrollTop适用于Safari和document.documentElement其他所有w3schools（请参见示例）

element.scrollTop 在所有浏览器中都可以使用，不适用于文档级。

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }
— K
source
-1

使用打击代码计算高度+滚动

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";
— 阿里·巴格里（Ali Bagheri）
source
-1

下面的此跨浏览器代码评估body和html元素的所有可能高度，并返回找到的最大值：

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

一个工作示例：

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();
body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}
<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
展开摘要

— 威利·旺卡
source
请说明投票否决的动机，以便我纠正这一点。非常感谢
— Willy Wonka'Mar
-4

我现在不知道确定高度，但是您可以使用它在底部放置一些东西：

<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>
— 杰迪霍克
source
1
相信我，我已经用尽了HTML和CSS资源。无法解释，但是如果您在这些站点上尝试可以看到问题。
— Nic
-4

正确添加参考

就我而言，我使用的是ASCX页面，而包含ascx控件的aspx页面未正确使用引用。我刚刚粘贴了以下代码，它可以正常工作：

<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>
— 胡说
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.