如何从动态加载的网页中提取内容使用 MutationObservers

问题描述

Tl; DR：我如何获取动态加载的新闻文章 here 的内容。

大家好。我目前正在构建一个需要解析页面上所有文本的 chrome 扩展。

起初，这看起来很简单 - 在页面加载时，您可以简单地沿着 DOM 走动并收集所有文本节点

const walker = document.createTreeWalker(elem,NodeFilter.SHOW_TEXT);
for (let n; (n = walker.nextNode());) {
    ... parse n ...
}

然而，当页面加载后动态加载内容时，这种方法是有问题的。这种动态内容加载在新闻网站中很常见。

考虑以下西班牙新闻网页： https://aristeguinoticias.com/1501/mexico/si-no-lo-iban-a-procesar-por-que-no-dejaron-a-cienfuegos-en-eu-mike-vigil/

所有主要内容都是在页面加载后动态加载的，因此这种方法不会为您提供文章内容。

为了解决这个问题，我正在考虑使用 JavaScript MutationObserver API。理想情况下，每次页面发生更改时我都会收到通知，然后我就可以跟踪所有动态添加的内容。

var observer = new MutationObserver(function (mutations) {
  mutations.forEach(mutation => {

    if (mutation.type == "characterData"){
      console.log(mutation.target.nodeValue);
    }

    else if (mutation.type == "childList"){
      mutation.addednodes.forEach(node => {
        console.log(node.nodeValue);
    }
  });
});

observer.observe(document,{
  childList: true,subtree: true,characterData: true,attributes: false
});    

这种方法更好。它会打印评论部分、侧边栏、标题等中的所有文本。

然而，它仍然没有得到主要内容（实际的新闻文章）。

任何想法如何获取实际页面内容？此示例特定于上面的西班牙新闻网页，但我在许多网站上都发现了相同的问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）