如何找到整个网页的高度？答案

【问题标题】：How to find the height of the entire webpage?如何找到整个网页的高度？
【发布时间】：2021-06-28 22:50:23
【问题描述】：

我正在研究一种捕获网站屏幕截图的解决方案。我正在使用 slimerjs.org 中提到的默认示例来完成工作。

屏幕截图非常适合这个工具，但我需要拍摄网站的全高屏幕截图。在截取http://www.yellowpages.com之类网站的屏幕时，我可以得到全长屏幕，而无需提及任何高度参数。

但是当我尝试这个网址时：http://votingbecause.usatoday.com/

我只得到设置分辨率的截图（默认：1920x1080），我不能得到全长图像。

由于我使用的是 slimerjs，我可以使用 jQuery 来操作 dom。我需要找到完整的网站高度，以便我可以截取该分辨率的屏幕截图

我试过了

document.height()
document.body.scrollheight
screen.height
$(document).height()
（以及我发现的许多其他）

但所有这些都只给出了视口的高度（视图中的网站）

问题是，如何找到网站的完整滚动高度？

【问题讨论】：

要提供一个好的问题，您应该将到目前为止的相关源代码和所有信息直接放入问题中。当链接的网站出现故障时，问题就变得毫无价值。
对此我深表歉意，但主要问题是获取网站的高度，我想我不应该提到为什么我需要高度参数

标签： javascript jquery screenshot fullscreen webpage-screenshot

【解决方案1】：

为了更笼统地查找任何页面的高度，您可以通过简单的递归找到当前页面上最高的 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://votingbecause.usatoday.com/) 上测试它，并将此脚本粘贴到 DevTools 控制台。

享受吧！

附：支持iframe内容。

【讨论】：

只是一个疑问，这适用于使用 iframe 的网站吗？

【解决方案2】：

网站内容在以下div中

<div class="site-wrapper flex column">

使用此代码获取它的高度

document.querySelector(".site-wrapper").scrollHeight

【讨论】：

这很好，但是有没有通用的解决方案来找到 height ，所以它也适用于其他网站？
据我所知，没有任何直接的方法可以实现它。每个网站都有不同的内容容器，它们可以嵌套在其他元素中，例如您提供的网站。

【解决方案3】：

2020 年的更新答案：

您可以简单地通过以下行来获取网页的高度

代码：

console.log("Page height:",document.body.scrollHeight);

【讨论】：

【解决方案4】：

尝试 windows.innerHeight 以获取浏览器视口大小我想这就是你想要的

【讨论】：

【解决方案5】：

$("body").height();

是你需要的

【讨论】：

我试过了，我只是得到了网站的高度，上面网站的高度应该接近5000像素
第二页的高度是1536px而不是5000px。
@iHasCodeForU 你是怎么得到这个值的，请告诉：D 当我在我制作的工具中设置 5000 像素时，我得到了完整的网站截图，所以我假设它是 5000 像素
我打开了“inspect element”并点击了body标签。在左下角，它说的是我的尺寸。（歌剧浏览器）

【解决方案6】：

$(window).height();

检索当前窗口高度..

【讨论】：

【解决方案7】：

这是我发现的有效方法。 document.body.scrollHeight 给我的值为0。有效的是

document.documentElement.scrollHeight

https://minimul.com/getting-a-zero-with-document-body-scrollheight.html

【讨论】：