angularjs - 如何在任何网站上正确使用 PhantomJS？

Question

我正在尝试使用 PhantomJS 捕获网站，特别是我正在使用 Pageres .

本网站有:

• AngularJS
• 本地存储的使用
• 对 API 的 AJAX 请求

所以，我在本地进行测试，但没有得到预期的结果，有时屏幕截图会出现错误 - 呈现部分内容，有时它不会呈现完整内容。

一旦网站完全加载，Pagerer 似乎没有足够的时间截取屏幕截图。我已经添加了延迟选项，但它无论如何都会失败，实际上我可以说它在没有延迟选项的情况下效果更好。

这是它应该呈现的内容:

当它工作得最好时，这就是我得到的:

这是我的渲染代码:

  var pageres = new Pageres({})
      .src('fantastica.a2015.mediotiempo.com', ['1440x900'], {delay: 3, crop: false});

  pageres.on('warn', function (err,obj) {console.log(err,obj)});
  pageres.run(function (err, screenshot) {
      screenshot[0].pipe(response);
  });

And, (I know there would be MUCH code to explain now) this is JS code being rendered.

有什么特别的建议吗？

Answer 1

• 了解 Phantom 版本之间的差异。

Phantom 1.9.x(Pageres 使用的)是几年前的浏览器引擎(Chrome 13 是最接近的等效项)并且不会呈现许多 HTML5 功能。

Phantom 2.x 是一个更现代的 webkit 引擎。但是因为: a) 因为他们还没有制作现成的 linux 二进制文件； b) 一些小的 API 更改，像 CasperJS 和 Pageres 这样的项目正在阻止支持它。根据 https://github.com/sindresorhus/pageres/issues/77 中的评论如果您制作自己的二进制文件并对其进行符号链接(symbolic link)，它就可以工作。

另请注意，SlimerJS 是 PhantomJS 的替代品，它基于 Firefox 而不是 WebKit。没有基于 Blink 的类似项目(获取现代 Chrome 如何呈现它们的屏幕截图)，但是有用于 IE 的 TrifleJS。 (但是 Pageres 页面说支持其他引擎不是该项目的目标。)

• 等待 DOM 元素出现，而不是使用延迟。

Ajax 调用、延迟加载等让事情变得非常难以预测。因此，进入一个轮询循环，并且在您想要在屏幕截图中显示的 DOM 元素现在可见之前不要截取屏幕截图。对于这种情况，CasperJS 有 waitForSelector()。 PhantomJS 具有稍微低级的 waitFor()。

我认为 pageres 需要一些修改才能添加此功能。