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

I am working on a solution capturing screen-shots of websites. I am using the default example mentioned at slimerjs.org to get the job done.

我正在研究一个解决网站截图的方法。我正在使用slim .org中提到的默认示例来完成这项工作。

Screen-shots are great with this tool, but I need to take full height screen-shots of websites. When capturing screens of websites like http://www.yellowpages.com, I can get full length screens without having to mention any height parameter.

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

But when I try this url: http://votingbecause.usatoday.com/

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

I only get screenshot of the set resolution (default: 1920x1080), I can't get full length images.

我只能得到设置分辨率的屏幕截图(默认为1920x1080)，我不能获得完整的图像。

Since I am using slimerjs, I can manipulate the dom by using jQuery. I need to find complete website height so that I can take screenshot of that resolution

因为我使用的是slimerjs，所以我可以使用jQuery来操作dom。我需要找到一个完整的网站高度，这样我就可以对这个分辨率进行截图

I tried

我试着

document.height()
document.height()
document.body.scrollheight
document.body.scrollheight
screen.height
screen.height
$(document).height()
$(document).height()
(and many other which i found)
(还有很多我发现的)

But all of these only gave the height of the viewport (website in view)

但所有这些都只给出了viewport (view in view)的高度

Question is, how to find the full scrollable height of the website?

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

4 个解决方案

#1

To be more general and find the height of any page you could just find the highest DOM Node on current page with a simple recursion:

为了更一般地查找任何页面的高度，只需使用简单的递归查找当前页面上的最高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);
})();

You can test it on your sample site(http://votingbecause.usatoday.com/) with pasting this script to a DevTools Console.

您可以在示例站点(http://votingbece.usatoday.com/)上测试它，并将该脚本粘贴到DevTools控制台。

Enjoy!

享受吧!

P.S. Supports iframe content.

注:支持内嵌框架内容。

#2

The contents in the site are in the following div

站点中的内容在以下div中

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

use this code to get it's height

使用此代码获取它的高度

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

#3

$("body").height();

is what you need

是你需要的

#4

$(window).height();

retrieve current window height..

获取当前窗口的高度。

#1