如何使用 Javascript 抓取 Javascript 呈现的网站？答案

【问题标题】：How to scrape Javascript rendered websites using Javascript?如何使用 Javascript 抓取 Javascript 呈现的网站？
【发布时间】：2018-04-21 20:31:15
【问题描述】：

我正在尝试抓取该网站的$('a[href^="mailto:"]')：https://celsius.network/

当我转到浏览器控制台并运行它时，我会得到一个链接，所以我知道它在那里。

问题是我的请求（使用 Axios 库）在加载 javascript 之前返回 DOM。我已经设置了 User-Agent，但它看起来不起作用。

const axiosClient = () =>
  axios.create({
    headers: {
      "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"
    },
    timeout: 10000
  });


axiosClient()
  .get("https://celsius.network")
  .then(({ data }) => {
    console.log("DATAAAAAAAA: ", data);
  })

这是返回原始 HTML 和正文：

<body>
  <div id="app"> </div>
  ....

而不是在所有 javascript 操作 DOM 之后完全加载的那个。

附：我是通过 firebase 函数来做这件事的，所以我认为我可以安装的东西是有限制的。

更新

const findEmail = url =>
  new Promise((resolve, reject) => {
     // here!
  });

【问题讨论】：

当文档没有使用 CORS 标头时，如何获取原始 HTML 作为响应？
How to parse DOM (REACT)的可能重复

标签： javascript html node.js axios

【解决方案1】：

您的请求方法不足以模拟您在浏览器中访问页面时所期望的内容。虽然有一些选择，puppeteer 可能是这份工作的候选人。

您可以在浏览器中手动执行的大多数操作都可以使用 Puppeteer 完成！

看看下面...

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://celsius.network/');
  const textContent = await page.evaluate(() => document.querySelector('a[href^="mailto:"]').textContent);

  console.log(textContent); // presale@celsius.network

  browser.close();
})();

我对你的限制不是很清楚...

我可以安装的内容有限制

如果你有 axios，我假设你可以安装这个 npm 包？

根据您的更新，puppeteer 也可以通过 promise api 制作。以下应该为您做...

const findEmail = url =>
  new Promise((resolve, reject) => {
    puppeteer.launch().then((browser) => {
      browser.newPage().then((page) => {
        page.goto('https://celsius.network/').then(() => {
          page.evaluate(() => document.querySelector('a[href^="mailto:"]').textContent).then((element) => {
            resolve(element);
            browser.close();
          });
        });
      });
    });
  });

findEmail().then((email) => {
  console.log(email); // presale@celsius.network
});

【讨论】：

哇，我想试试这个！有没有办法把它放在 Promise 中，而不是 (async() => {})() 你要做的事情
我更新了问题以描述我在用 Promise 谈论的内容
@Edmund 我已经为你更新了我的答案，请看一下，如果这是你想要的，请告诉我？