如何使用 node.js 抓取具有动态内容的页面？答案

【问题标题】：How can I scrape pages with dynamic content using node.js?如何使用 node.js 抓取具有动态内容的页面？
【发布时间】：2015-04-28 15:10:08
【问题描述】：

我正在尝试抓取website，但我没有得到一些元素，因为这些元素是动态创建的。

我在node.js中使用cheerio，我的代码如下。

var request = require('request');
var cheerio = require('cheerio');
var url = "http://www.bdtong.co.kr/index.php?c_category=C02";

request(url, function (err, res, html) {
    var $ = cheerio.load(html);
    $('.listMain > li').each(function () {
        console.log($(this).find('a').attr('href'));
    });
});

此代码返回空响应，因为当页面加载时，<ul id="store_list" class="listMain"> 为空。

内容尚未附加。

如何使用 node.js 获取这些元素？如何抓取包含动态内容的页面？

【问题讨论】：

使用 phantom.js 一个无头浏览器，它会加载和渲染页面。您可以使用其 javascript API 访问页面上的不同元素。
谢谢萨菲！但是你能给我一个代码 sn-p 或者这个案例的一些参考吗？
请注意，此页面上的最佳答案来自 2015 年，建议使用过时的库。截至 2021 年，Puppeteer 和 Playwright 是首选的动态抓取工具，当您阅读本说明时，可能还有其他工具已成为最先进的工具，因此请阅读整个线程。 OP 自 2016 年以来就没有访问过 SO，所以我预计在网站政策发生之前，复选标记不会改变。

标签： javascript node.js web-crawler phantomjs

【解决方案1】：

给你;

var phantom = require('phantom');

phantom.create(function (ph) {
  ph.createPage(function (page) {
    var url = "http://www.bdtong.co.kr/index.php?c_category=C02";
    page.open(url, function() {
      page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
        page.evaluate(function() {
          $('.listMain > li').each(function () {
            console.log($(this).find('a').attr('href'));
          });
        }, function(){
          ph.exit()
        });
      });
    });
  });
});

【讨论】：

这很好用！！非常感谢。但我还有一个问题。此页面使用向下滚动附加子级。所以我必须知道该组何时结束才能附加。可能在代码上面声明回调（function（）{ph.exit（）}但幻象没有终止并保留光标！！
@Safi 我复制并尝试了上面的代码，但没有任何反应。你能帮我么。我运行 node file.js 并进入下一行。
这段代码中等待 ajax 完成加载的逻辑到底在哪里？我不明白幻影怎么会知道。
phantom: ⚠️ 此软件包已被弃用 ⚠️ 此软件包不再维护。您可能想尝试改用 puppeteer
@1mike12 您可以在打开页面后等待 setTimeout 承诺，或者 Phantom 的 waitFor 可以帮助您验证页面内的某个条件是否为真

【解决方案2】：

查看GoogleChrome/puppeteer

无头 Chrome 节点 API

它使抓取变得非常简单。以下示例将在npmjs.com 处刮掉标题（假设.npm-expansions 仍然存在）

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://www.npmjs.com/');

  const textContent = await page.evaluate(() => {
    return document.querySelector('.npm-expansions').textContent
  });

  console.log(textContent); /* No Problem Mate */

  browser.close();
})();

evaluate 将允许检查动态元素，因为这将在页面上运行脚本。

【讨论】：

不错的选择，会计，这个announcement
我读了一些文章，我可以说 puppeteer 在服务器（node.js）上运行而不是在客户端（在浏览器中）吗？

【解决方案3】：

使用新的 npm 模块 x-ray，带有可插拔的网络驱动程序 x-ray-phantom。

以上页面中的示例，但这里是如何进行动态抓取：

var phantom = require('x-ray-phantom');
var Xray = require('x-ray');

var x = Xray()
  .driver(phantom());

x('http://google.com', 'title')(function(err, str) {
  if (err) return done(err);
  assert.equal('Google', str);
  done();
})

【讨论】：

您是以node google_xray_code.js 还是phantomjs google_xray_code.js 运行这个程序？？在目前的形式中，phantomjs 不是节点模块..
@zipzit phantom 不是节点模块；它是一个驱动程序，您可以在外部安装并导出路径，如果您希望将其与 X 射线一起使用。
是什么让这个充满活力？ google.com 的页面标题是静态的吗？
phantom stderr: 'phantomjs' 不是内部或外部命令、可运行程序或批处理文件。 C:\Projects\Dealbuilder1One\node_modules\nightmare\lib\index.js:284 抛出错误； ^
我试过这个，X射线在静态网站上工作得很好。但是对于动态 X 射线幻像安装来说是一件很头疼的事情。取而代之的是，我发现pusher.com/tutorials/web-scraper-node中提到的静态+动态报废非常现实和简单的解决方案@

【解决方案4】：

最简单可靠的解决方案是使用 puppeteer。正如https://pusher.com/tutorials/web-scraper-node 中提到的，它适用于静态+动态scraping。

只将Browser.js、TimeoutSettings.js、Launcher.js中的超时时间300000改为3000000

【讨论】：