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

Question

HTML 我正在使用 node.js 与我在浏览器中看到的 HTML 有很大不同（使用 google chrome 检查功能）。我假设发生这种情况是因为在使用浏览器时我必须等待某些元素加载但我在创建请求时不等待它们。如何请求满载 HTML？不伪装成真实用户（木偶操纵者）是否可行？

例如，这是我尝试从中获取视频元素 link https://clips.twitch.tv/IronicPoisedTermite4Head 但是我获取的 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 和运行在 HTML 中找到的任何 <script> 标签。这些脚本标签可能会修改您看到的内容。特别是一些网站发出额外的 HTTP 请求来检索额外的内容，然后将这些内容插入到页面中。产生我称之为“完整内容”的内容。随着时间的推移，这些脚本甚至可能会继续运行ning 以继续更新内容。

当您对某些 URL 执行 fetch() 时，会检索上面标记为“原始内容”的内容。这就是它所做的一切。 fetch() 只是为 URL 执行初始 HTTP GET。它不解析结果 HTML，也不运行它可以在 HTML 中找到的任何 <script> 标签。因此，fetch() 不会产生如上所述的“完整内容”。有时，“原始内容”足以满足您的工作需求，有时“完整内容”才是您所需要的——这实际上取决于具体的网站。

要获得“完整内容”，您必须将“原始内容”提供给类似浏览器的环境，该环境可以“运行”让它的脚本执行它们的操作，以提供DOM 这些脚本的环境到运行中，这样您就可以查询生成的 DOM 以获得“完整内容”。 puppeteer 就是这样一种用于获取“完整内容”的工具。它实际上使用 Chromium 引擎（Chrome 浏览器使用的相同引擎）从字面上“运行”网页并让它的 <script> 标签做他们的事情，然后你可以获得“完整在这些脚本运行.

之后从中获取内容”

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

How can I request a fully loaded HTML? Is it possible without pretending to be a real user (puppeteer)?

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

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

Node.js how to get HTML after site is fully loaded

html

javascript

browser

node.js

web-scraping