如何找到整个网页的高度? [英] How to find the height of the entire webpage?

问题描述

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

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.

此工具的屏幕截图非常棒，但是我需要对网站进行全高度的屏幕截图.捕获诸如 http://www.yellowpages.com 之类的网站的屏幕时，我可以获得完整的屏幕，而无需提及任何高度参数.

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://votingbecause.usatoday.com/

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

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

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

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

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

我尝试了

• document.height()
• document.body.scrollheight
• screen.height
• $(document).height()
• (以及我发现的许多其他东西)

但是所有这些都仅给出了视口的高度(视图中的网站)

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?

推荐答案

要更笼统并找到任何页面的高度，您只需简单的递归就可以找到当前页面上最高的DOM节点.:

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);
})();

您可以在示例站点( http://votingbecause.usatoday.com/)上对其进行测试将此脚本粘贴到DevTools控制台.

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

享受！

P.S.支持 iframe 内容.

这篇关于如何找到整个网页的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！