How to find the height of the entire webpage?

Question

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.

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.

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

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

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

I tried

• document.height()
• document.body.scrollheight
• screen.height
• $(document).height()
• (and many other which i found)

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

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

Answer 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:

;(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.

Enjoy!

P.S. Supports iframe content.