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

Question

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

使用此工具进行屏幕截图非常棒,但我需要对网站进行全高度的屏幕截图.当捕捉像http://www.yellowpages.com这样的网站的屏幕时,我可以获得全长屏幕,而不必提及任何高度参数.

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

我只获得设定分辨率的截图(默认值:1920x1080),我无法获得全长图像.

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

我试过了

• document.height()
• document.body.scrollheight
• screen.height
• 的$(document).height()
• (和我发现的许多其他)

但所有这些只给出了视口的高度(网站在视图中)

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

Answer 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控制台.

请享用!

PS支持iframe内容.

Answer 2

2020 年更新答案：

您只需通过以下行即可获取网页的高度

代码：

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