如何检测页面是否已更新其内容？答案

【问题标题】：How to detect if a page has updated its content?如何检测页面是否已更新其内容？
【发布时间】：2020-12-31 11:07:27
【问题描述】：

我正在制作一个 javascript 代码，现在在控制台中使用它，但也许我稍后会将其转换为扩展程序，它会在此列表中的每个 Facebook 朋友之外创建一个复选框：[https://mobile.facebook.com/[Your Username]/friends]

首先脚本需要向下滚动直到加载所有好友，然后附加复选框。问题是我无法告诉脚本何时停止滚动，唯一的方法是检测页面是否已更新，我不知道该怎么做？

我尝试了什么

第一种方法

我的第一个想法是让用户能够选择加载多少朋友，然后加载朋友直到输入的数字小于加载的朋友数

x = parseInt(prompt("How many friends you wanna load?"))
friends = document.querySelectorAll('._55wp._7om2._5pxa._8yo0[data-sigil="undoable-action"]')
scrolling = (n) => {
    if(x < 0 || x > 5000) return console.log("invalide number");
    console.log(n + " friends loaded")
    if(n < x) {
        setTimeout(function() {
            window.scrollTo(0, 9999999);
            friends = document.querySelectorAll('._55wp._7om2._5pxa._8yo0[data-sigil="undoable-action"]');
            scrolling(friends.length)
        }, 3000)
    }
    else 
    {
        // create_checkboxes();
    }
}
scrolling(friends.length)

这种方法的问题是：用户可能会给出一个不合理的数字，例如如果他有 500 个朋友，并且输入他想加载 600 个朋友，这将是一个无限循环，因为数字 @987654323 @ 永远不会大于输入。并且脚本无法获取用户有多少朋友。

第二种方法

我考虑过指定迭代次数，根据我的计算，139 次迭代足以加载 5000 个朋友，但这有两个问题：第一个很清楚，对于那些朋友很少的人来说，这将是浪费时间。第二个，如果互联网很慢，可能在等待 3 秒后（检查 setTimeOut），朋友将不会被加载，因此可能即使 139 次迭代也不够，脚本也不会知道。

所以我唯一的希望是检测 Facebook 是否进行了更改并加载了更多朋友，也许是检测 dom 是否已更改的方法，甚至是检测页面是否未生成 XHR 的方法在它击中页面后，后一种方式并不好，因为它可能只是因为互联网速度慢。

【问题讨论】：

标签： javascript facebook console

【解决方案1】：

在列表的底部，Facebook 维护了一个带有 seeMoreFriends 类的 div，它仅在有更多朋友要加载时出现：

<div class="seeMoreFriends acw apl" id="m_more_friends" data-sigil="marea">
  <div style="text-align:center;" class="centeredIndicator">
    <div class="_2so _2sq _2ss img _50cg" data-animtype="1" id="u_6_11" data-sigil="m-loading-indicator-animate m-loading-indicator-root"></div>
  </div>
</div>

使用这个信息，你可以检查这个div是否存在，如果存在，就知道可以继续滚动，否则，可以停止滚动。使用MutationObserver，您将知道何时检查每个新负载是否存在上述 div：

const callback = (mutationList, observer) => {
  const moreFriends = document.querySelector(".seeMoreFriends");
  if (moreFriends) {
    moreFriends.scrollIntoView();
  } else {
    observer.disconnect();
    addCheckboxs();
  }
}

const addCheckboxs = () => {
  document.querySelectorAll('._55wp._7om2._5pxa._8yo0[data-sigil="undoable-action"]').forEach(item => {
    item.insertAdjacentHTML('beforebegin', '<input type="checkbox">')
  });
}

window.addEventListener("load", () => { // If running in the console the page would have already been loaded, so you can run the callback code directly
  const loader = document.querySelector(".seeMoreFriends");
  if (loader) { // if more friends to load
    const obs = new MutationObserver(callback);
    obs.observe(document.querySelector("._2pit"), {
      childList: true
    }); // listen to changes on the container div of the friends list (holding the seeMoreFriends div and friends list divs)
    loader.scrollIntoView(); // kick off the loading, which will then trigger the mutation observer callback as the page continues to laod
  } else {
    addCheckboxs();
  }
});

【讨论】：

【解决方案2】：

您可以查看加载好友的 div 的高度。并继续向下滚动。在高度停止变化之前，您应该知道所有朋友都已加载，并且没有其他要加载的内容。或者您可以将帐户有多少朋友存储在一个变量中并检查有多少朋友 div。如果朋友 div 的数量达到朋友数量，你就可以走了。

【讨论】：