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

IT技术 javascript
2021-02-01 22:26:58

有些文件我无法获得文件的高度(将某些东西绝对放在最底部)。此外, padding-bottom on 似乎在这些页面上没有任何作用,但在高度将返回的页面上起作用。案例:

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

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

在 Paperback Swap 上:
jQuery 的$(document).height();TypeError:$(document)is null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意:如果那里有一些技巧,我有浏览器级别的权限。

6个回答

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

过去有一个复杂的最佳实践公式,用于测试正确的高度/宽度。这涉及使用 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 bookmarklet 进行的快速测试会返回两个引用页面的正确高度,代码示例也是如此。

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

这很好,但如果文档未准备好可能会给出不正确的结果 - 即,当在服务器生成的代码中使用时......
2021-03-22 22:26:58
在文档准备好之前对其进行测试是行不通的。这与生成的代码/文档无关,而是与文档的加载方式有关。测试必须文档准备好运行,我建议仅在文档完全加载时运行它,因为剩余的项目可能会影响高度,也会调整浏览器的大小。
2021-03-22 22:26:58
评价这个解决方案,因为它在你使用原型库时有效,使用 jQuery 没有这样的问题
2021-03-23 22:26:58
我需要扩大 iframe 并缩小它(facebook 应用程序),并发现 document.body.offsetHeight 是我的最佳选择,大多数浏览器都准确支持。
2021-04-02 22:26:58
在使用 iframes 和 jquery 时,由于这种计算方法,iframe 的文档高度将始终至少是 iframe 本身的高度。当您想要降低 iframe 的高度以匹配内容时,请务必注意这一点。您首先必须重置 iframe 的高度。
2021-04-08 22:26:58

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

2020年的答案:

document.body.scrollHeight

编辑:以上没有考虑<body>标签上的边距如果您的身体有边距,请使用:

document.documentElement.scrollHeight
@Joan 这由原始海报决定:)
2021-03-10 22:26:58
这有一个错误:例如,假设有一个<h1>元素在<body>它的默认边距的开头,它会将<body>元素向下而无法检测到它。document.documentElement.scrollHeight(not document.body,scrollHeight) 是最准确的做事方式。这适用于身体边缘和身体内部的东西边缘向下推动它。
2021-03-15 22:26:58
在有边距的情况下不起作用。document.documentElement.getBoundingClientRect()效果更好。
2021-03-31 22:26:58
截至 2017 年,这应该被标记为我的正确答案。
2021-04-06 22:26:58

你甚至可以使用这个:

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())

完整文档高度计算:

为了更通用并找到任何文档的高度,您可以通过简单的递归找到当前页面上最高的 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);
})();

您可以通过将此脚本粘贴到 DevTools 控制台,在您的示例站点(http://fandango.com/http://paperbackswap.com/)上对其进行测试。

注意:它正在与Iframes.

享受!

这就像一个魅力!这里没有其他答案可以获取完整高度(包括可滚动区域),它们都只返回可见区域的高度。
2021-03-20 22:26:58
真的很特别,从来没有想过这个。我想只有一个在 phantomjs 中工作。
2021-03-30 22:26:58

确定文档大小的“jQuery 方法” - 查询所有内容,取最高值,并希望得到最好的 - 在大多数情况下都有效,但并非在所有情况下都有效

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

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

因为该插件是用 vanilla Javascript 编写的,所以您也可以在没有 jQuery 的情况下使用它