是否可以使用chromeless API访问document.body.scrollHeight？

Question

我想使用chromless api捕获一个完整的页面截图。(整页显示为折叠下的所有内容，而不仅仅是当前视口。

为了做到这一点，我认为人们应该计算网页的高度(使用document.body.scrollHeight)，并将视口高度设置为该值。

这是我目前所拥有的，我正在他们的demo site上测试

const chromeless = new Chromeless({ remote: true })

const screenshot = await chromeless
  .goto('https://www.graph.cool')
  .setViewport({width: 1024, height: 800, scale: 1})
  .evaluate(() => {
    const height = document.body.scrollHeight;
    return height
    })
  .setViewport({width: 1024, height: height, scale: 1})
  .screenshot()

console.log(screenshot)

await chromeless.end()

我认为(希望)我的javascript是可以的，也许这是API的一个限制？可以从无头web浏览器访问document对象吗？

以下是evaluate的文档以供参考：https://github.com/graphcool/chromeless/blob/master/docs/api.md#api-evaluate

Answer 1

可以像这样通过抓取文档的高度来截取整个页面(demo

const chromeless = new Chromeless({ remote: true })

const scrollHeight = await chromeless
  .goto('https://www.graph.cool')
  .evaluate(() => document.body.scrollHeight)

console.log(`The document's height is ${scrollHeight}px`)

const screenshot = await chromeless
  .setViewport({width: 1024, height: scrollHeight, scale: 1})
  .screenshot()

console.log(screenshot)

await chromeless.end()

主要要注意的是，我们必须从evaluate()调用返回高度，并将其赋给一个变量scrollHeight，然后我们可以使用该变量来设置视口的高度。