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

Question

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

使用此工具截屏效果很好，但我需要截取网站的全高截屏。当截屏像http://www.yellowpages.com这样的网站时，我可以得到全长屏幕而无需提及任何高度参数。

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

我只能获取设置分辨率的屏幕截图（默认：1920x1080），无法获取全长图像。

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

我试过了

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

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

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

Answer 1

$("body").height();

正是您所需要的

Answer 2

$(window).height();

检索当前window高度..

Answer 3

本站内容如下div

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

使用此代码获取它的高度

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

Answer 4

更一般地说，找到 任何页面的高度 你可以通过简单的递归找到当前页面上最高的 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://votingbecause.usatoday.com/) 上对其进行测试。

尽情享受吧！

P.S。支持 iframe 内容。

Answer 5

2020的更新答案：

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

代码:

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

Answer 6

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

document.documentElement.scrollHeight

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

Answer 7

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

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

How to find the height of the entire webpage?

javascript

jquery

screenshot

fullscreen

webpage-screenshot