加载页面后获取 HTML 信息

Question

所以基本上我正在尝试制作一个 discord 机器人来获取名为 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。查看下面的代码片段，它应该可以正常工作：

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));

加载页面后获取 HTML 信息

Fetching HTML information after page is loaded

html

javascript

fetch

jsdom

discord