如何获取动态加载的页面的 HTML答案

【问题标题】：How to get the HTML of a page that loads dynamically如何获取动态加载的页面的 HTML
【发布时间】：2017-10-29 04:05:44
【问题描述】：

我正在尝试从网站上抓取内容。我能够使用 nodejs 获取主页的 HTML，但我发现该页面是动态生成的。资源是从其他来源请求的，当我最终抓取 HTML 时，它们还不存在。

我已经用 PhantomJS 验证了这一点，它允许我截屏页面并生成被抓取内容的屏幕截图。该页面肯定会加载，但它完全是空的。

我要问的是，这可以做到吗？ CORS 是这里的问题，还是我需要以某种方式延迟加载？任何想法表示赞赏。

【问题讨论】：

延迟抓取，直到页面为您提供了您正在寻找的所有内容，或者使用超时，或者将抓取链接到页面加载的完成事件中。
超时是不行的。我在等待 10 秒后得到相同的空白页面。
PhantomJS 是什么版本？ page.onError 回调说什么？您是否有使用 node.js 进行此抓取，或者原始 PhantomJS 脚本可以做到吗？你能透露抓取的网址吗？
@Vaviloff 感谢您的回复。我实际上能够使用 Nightmare 解决这个问题，这是一个基于 phantomjs 的框架。如果您好奇，文档在 github 上，但是使用 Nightmare 我能够使用 JS 加载浏览器，从而按预期呈现页面。明天，我将尝试提取我需要的 HTML。
Nightmare 所做的一切，都可以在 node.js+phantomjs 或仅在 PhantomJS 中完成。可惜你没有分享你的代码，可能有某种问题。

标签： javascript html node.js phantomjs

【解决方案1】：

如果您使用流，它可能会抓取所有数据，直到真的什么都没有了。使用请求库：

const writeStream = fs.createWriteStream('somefile.txt');
request('http://google.com').pipe(writeStream);

如果您想要更多控制权：

const writeStream = fs.createWriteStream('somefile.txt');
const r = request('http://google.com');
r.pipe(writeStream)
r.on('data', data => {
  console.log('Grabbing data!');
});

r.on('end', () => {
  console.log('data grabbing has ended')
});

【讨论】：

有趣...所以这里的想法是它会实时生成 HTML，类似于浏览器请求时如何加载页面？ ----- 出于理智，您能否确认我的 JS 脚本没有遇到任何问题？即使在真正的浏览器之外进行请求，我也应该能够加载这些内容，对吧？

【解决方案2】：

Nightmare JS 是这里的解决方案...使用 Nightmare 我能够打开浏览器并做各种疯狂的事情。

对于那些好奇的人，文档可在 GitHub 和他们的网站上找到。

对于那些遇到类似问题的人，我真的建议检查一下。

Nightmare JS website Nightmare GitHub

【讨论】：

【解决方案3】：

我相信它可以使用 phantom 来完成，但我确实发现 casperJS 很简单。它建立在 PhantomJS 之上，但更简单。它可以让你访问 DOM 内部的iframes，你也可以使用waitfor 函数，它允许你在执行/抓取之前等待特定的选择器或其他资源，这在处理动态页面时非常有用。

【讨论】：