Node-fetch 获取 "View Source" HTML，想要 "Inspector" 中的内容

Question

我正在使用 node-fetch 来尝试获取网站的内容。我已经阅读了几个类似的问题，例如 this one or this one，但我仍然无法弄明白。

当我在页面上时，我在转到 View:Source 时看到了一组 HTML，在检查器中看到了另一组。似乎这是因为该网站向我展示了即时 DOM 而查看源代码 (CTRL+U) 向我展示了最初发送的内容？例如HTML的“View:Source”开头：

<!doctype html><html lang="en" translate="no"><head><meta name="version"/><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>

HTML 的“Inspector”版本开始：

<html translate="no" class="fontawesome" lang="en"><head style=""><script

以下是我的请求目前是如何使用 node-fetch 设置的：

const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

var options1 = {
        method: 'POST'
        ,headers:{/*omitting the options here*/  }
       ,body:       new URLSearchParams(postData)};

 var urlString1       = new URL(url);

    fetch(urlString1, options1)
      .then(res =>{console.log(res.headers); return res.text();})
      .then(values=>{ console.log(values);});
;

如何设置我的请求以从“Inspector”而不是“View Source”获取 HTML？

Answer 1

Seems like this is because the website is showing me the instantaneous DOM whereas View Source (CTRL+U) shows me what was initially sent?

完全正确。

查看源代码显示 HTML.

的文本内容

浏览器开发人员工具中的 DOM 树（右键单击并单击“检查元素”时看到的内容）向您显示实际加载的元素是什么，包括使用 [= 完成的任何操作25=] 自加载以来。基本上，HTML 被解析，树被构建，然后为了开发人员的方便，它以一种很好的格式再次转换回 HTML，以便您在开发人员工具中查看。

How do I set up my request to get the HTML from the "Inspector" not from "View Source"?

您实际上需要运行浏览器引擎，例如无头 Chrome。有几个 NPM 包可以做到这一点。

Node-fetch 获取 "View Source" HTML，想要 "Inspector" 中的内容

Node-fetch fetches the "View Source" HTML, want what's in "Inspector"

javascript

fetch

node.js