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

我正在研究解决方案捕获网站的屏幕截图。我正在使用slimerjs.org中提到的默认示例来完成工作。如何找到整个网页的高度？

屏幕截图非常适合这个工具，但我需要采取网站的全高度屏幕截图。当捕获像http://www.yellowpages.com这样的网站屏幕时，我可以获得全长屏幕，而不必提及任何高度参数。

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

我只得到设定的分辨率（默认值：1920×1080）的截图，我不能让全长图像。

由于我使用slimerjs，我可以通过使用jQuery来操纵dom。我需要找到完整的网站高度，使我可以把该决议

我试图

document.height（）
document.body.scrollheight的截图
screen.height
$（document）.height（）
（以及其他许多我发现的）

但所有这些仅给出了视口的高度（网站在视图中）

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

来源

2016-12-16 Syed Faizan

为了提供一个好问题，您应该将相关的源代码到目前为止，并将所有信息直接放入问题中。当一个链接网站发生故障时，问题就变得毫无价值。 –

我对此表示歉意，但主要问题是要获得网站的高度，我想我应该没有提到为什么我需要高度参数 –

更普遍和发现的任何页面高度你可以只找到当前页面上的最高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控制台。

享受！

P.S.支持iframe内容。

来源

2016-12-16 09:17:42

你是一个拯救生命的人！非常感谢:) –

只是一个疑问，这是否与使用iframe的网站工作？ –

是的，它适用于iframe –

$("body").height();

是你所需要的

来源

2016-12-16 07:29:07 Chase

我试过这个，我只获得网站的高度，上面的网站的高度应该是近似5000像素 –

第二页是1536px高度不是5000px。 – iHasCodeForU

@iHasCodeForU你是如何得到这个值的，请告诉：D 当我在我制作的工具中设置5000 px时，我得到完整的网站截图，所以我假设它是5000px –

$(window).height();

检索当前窗口高度..

来源

2016-12-16 07:39:23

在网站上的内容是在下面的div

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

使用该代码来获得它的高度

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

来源

2016-12-16 07:41:23

这很好，但有没有一个通用的解决方案来找到高度，所以它也适用于其他网站呢？ –

据我所知，没有任何直接的方法来实现它。每个网站的内容都有不同的容器，并且可以嵌套在其他元素中，例如您在网站中提供的内容。 –

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

回答

相关问题