How to find the height of the entire webpage?

笑着哭i 提交于 2020-12-29 12:53:32

问题


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?


回答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.




回答2:


The contents in the site are in the following div

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

use this code to get it's height

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



回答3:


Updated Answer for 2020:

You can just simply pass this below line to get the Height of the Webpage

Code:

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



回答4:


$("body").height();

is what you need




回答5:


$(window).height();  

retrieve current window height..



来源:https://stackoverflow.com/questions/41179264/how-to-find-the-height-of-the-entire-webpage

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!