页面加载后获取 HTML 信息

Question

所以基本上我正在尝试制作一个不和谐的机器人来获取名为 Venge.io 的游戏中的玩家数据。他们的 api 是私有的，需要令牌才能访问。

我尝试使用下面的代码来获取我的特定统计信息的整个页面：

    if(message.content.startsWith(`${prefix}test`)){
        JSDOM.fromURL("https://social.venge.io/#Izzi").then(dom => {
            console.log(dom.serialize());
        });
    }

结果是这样的：

<li>
   <span class="label">KILLS</span>
   <span class="value">{{details.kills}}</span>
</li>

（长篇html片段）

当检查它手动加载时，它会给出如下结果：

<li>
   <span class="label">KILLS</span>
   <span class="value">11748</span>
</li>

我正在寻找如何获取加载的 html 而不是原始 html，以便我可以将其用于多个用户和更多可用的东西。

Answer 1

我刚刚查看了您提到的网站，它是一个 Vue.js SPA。不能使用 JSDOM 解析动态网页；你需要一个无头浏览器，比如Puppeteer，它可以执行JS函数。

如果你打开页面，你可以看到 Vue 应用程序（一个全局的app 变量）。在浏览器的控制台中，您可以访问 app.details 并查看它包含您可能需要的所有数据，包括 details.kills。

因此，您可以启动无头浏览器并获取所需的变量，而无需接触 DOM。查看下面的 sn-p，它应该可以正常工作：

const puppeteer = require('puppeteer');

async function getUserDetails(username) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const url = `https://social.venge.io/#${username}`;

  await page.goto(url, { waitUntil: 'networkidle0' });

  const handle = await page.evaluateHandle(() => app.details);
  const details = await handle.jsonValue();

  await browser.close();

  return details;
}

getUserDetails('Izzi')
  .then((details) => console.log(details.kills));