从 javascript 中的提取中获取呈现的 HTML

Question

我正在尝试从需要呈现的网站获取 table。这导致我获取的数据不完整。 body 是空的，因为我猜脚本还没有运行。

最初我想在浏览器中获取所有内容，但我无法做到这一点，因为 CORS header 未设置并且我无权访问服务器。

然后我尝试了使用 node.js 以及 node-fetch 和 JSDom 的服务器方法。我阅读了文档并找到了 {pretendToBeVisual: true } 选项，但这并没有改变任何东西。我在下面发布了一个简单的代码：

const fetch = require('node-fetch');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

let tableHTML = fetch('https://www.travsport.se/uppfodare/visa/200336/starter')
.then(res => res.text())
    .then(body => {
      console.log(body)
      const dom = new JSDOM(body, {pretendToBeVisual: true })
      return dom.window.document.querySelector('.sportinfo_tab table').innerHTML
    })
    .then(table => console.log(table))

我希望输出是 table 的 html，但截至目前，我只在响应中获取元数据和脚本，从而在提取 innerHTML 时导致代码崩溃。

Answer 1

为什么不使用 google-chrome 无头？

我认为您引用的网站不适用于 --dump-dom，但您可以激活 --remote-debugging-port=9222 并按照 https://developers.google.com/web/updates/2017/04/headless-chrome

中的说明进行任何操作

另一个有用的参考： How can I dump the entire Web DOM in its current state in Chrome?

从 javascript 中的提取中获取呈现的 HTML

Get the rendered HTML from a fetch in javascript

javascript

fetch

node.js

jsdom