Node.js如何在网站完全加载后获取HTML

Question

我使用 node.js 得到的 HTML 与我在浏览器中看到的 HTML 有很大不同（使用 google chrome 检查功能）。我认为发生这种情况是因为在使用浏览器时我必须等待某些元素加载，但在创建请求时我不会等待它们。我如何请求完全加载的 HTML？是否可以不假装成真正的用户（傀儡师）？

例如，我尝试从此链接https://clips.twitch.tv/IronicPoishedTermite4Head获取视频元素 ，但视频元素根本不存在于我获取的 HTML 中。

const fetch = require("node-fetch");
const jsdom = require("jsdom");

(async () => {
  let htmlDoc = await fetch("https://clips.twitch.tv/IronicPoisedTermite4Head")
    .then((res) => res.text())
    .then((body) => body); //body is totally different than HTML in the browser
  try {
    const document = new jsdom.JSDOM().window.document;
    console.log(htmlDoc);
    console.log(document.getElementsByTagName('video')[0]);
  } catch (e) {
    console.log(e);
  }
})();

Answer 1

当浏览器加载网页时，它会执行 HTTP GET 并返回一段静态 HTML。我们称之为“原始内容”。然后，它解析该 HTML 并运行<script>在该 HTML 中找到的任何标记。这些脚本标签可能会修改您看到的内容。特别是，某些站点会发出额外的 HTTP 请求来检索其他内容，然后将该内容插入到页面中。它产生了我所说的“完整内容”。这些脚本甚至可能随着时间的推移继续运行以继续更新内容。

当您执行fetch()某个 URL 时，会检索上面标记为“原始内容”的内容。这就是它的全部作用。 fetch()只是对该 URL 执行初始 HTTP GET。它不会解析生成的 HTML，也不会运行<script>可以在该 HTML 中找到的任何标记。因此，fetch()不会产生如上所述的“完整内容”。有时，“原始内容”足以满足您的工作需求，有时“完整内容”正是您所需要的 - 这实际上取决于特定的网站。

为了获得“完整内容”，您必须将“原始内容”提供给类似浏览器的环境，该环境可以“运行”它以让其脚本完成其工作，为这些脚本提供运行的 DOM 环境，以便您然后可以查询生成的 DOM 以获取“完整内容”。puppeteer 就是一种获取“完整内容”的工具。它实际上使用 Chromium 引擎（Chrome 浏览器使用的同一引擎）来“运行”网页并让其<script>标签完成其工作，然后您可以在这些脚本运行后从中获取“完整内容”。

fetch()本身无法获取“完整内容”，因为它不解析或运行页面的脚本，也不为它们提供运行的 DOM 环境。这就是像 puppeteer 这样的工具可以做到的。

我如何请求完全加载的 HTML？是否可以不假装成真正的用户（傀儡师）？

如果网站在<script>标签中使用 Javascript 来构建其“完整内容”，那么您必须使用像 puppeteer 这样的工具来获取“完整内容”。这不仅仅是等待的问题。您需要一个能够实际运行页面中的脚本的工具。