NodeJS Puppeteer：获取网页的完整HTML内容，如innerHTML，但包括任何影子根？

3df52oht 于 2023-05-22 发布在 Node.js

关注(0)|答案(1)|浏览(200)

在Puppeteer中浏览页面时，我通常可以获得完整的HTML内容，如以下文本：

var content = await page.evaluate( 
  () => document.querySelector('body').innerHTML );

然而，我目前正在处理的情况下，有多个嵌套的阴影根。因此，我假设必须遍历整个DOM，检查每个节点是否有可用的.shadowRoot，并分别遍历这些DOM。
有没有捷径或更简单的方法来做到这一点？像一个包含任何shadowroot DOM的innerHTML变体？

node.js

来源：https://stackoverflow.com/questions/65826064/puppeteer-get-full-html-content-of-a-webpage-like-innerhtml-but-including-any

1条答案

按热度按时间

j8yoct9x1#

您可以尝试递归遍历DOM树，并用其内容替换任何影子根HTML。粗略的例子：

const puppeteer = require("puppeteer"); // ^20.2.0

const html = `<!DOCTYPE html><html><body>
  <h1>hey</h1>
  <div></div>
  <h2>ok</h2>
<script>
const el = document.querySelector("div");
const root = el.attachShadow({mode: "open"});
el.shadowRoot.innerHTML = \`
  <h1>foo</h1>
  <h1>bar</h1>
  <h1>baz</h1>
\`;
</script>
</body></html>`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const outHtml = await page.evaluate(() => {
    const walk = doc => {
      doc.querySelectorAll("*").forEach(e => {
        if (e.shadowRoot) {
          e.innerHTML = walk(e.shadowRoot);
        }
      });
      return doc.innerHTML;
    };
    return walk(document.body);
  });
  console.log(outHtml);
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

相关：Puppeteer没有为带有阴影根的页面提供准确的HTML代码。

赞(0）回复(0）举报 2023-05-22

我来回答

NodeJS Puppeteer：获取网页的完整HTML内容，如innerHTML，但包括任何影子根？

1条答案

相关问题

热门标签

最新问答