如何使用 Javascript 监控网页的更改？答案

【问题标题】：How to monitor a webpage for changes using Javascript?如何使用 Javascript 监控网页的更改？
【发布时间】：2020-01-31 04:28:18
【问题描述】：

我已经对此进行了很多搜索，并且很长时间以来，我所能找到的只是在线网站，它们会为您监控网站，但大多数情况下需要钱才能在短时间内扫描。可能有一些软件或浏览器扩展也声称可以完成这项工作，但我没有成功。

由于我正在学习 JS，所以我认为自己可能有一些方法可以做到这一点。

这是我的想法，比较更改前后的 document.body。所以使用开发者工具控制台（F12），我尝试了这个：

x=document.body
    <body style="background-color: rgb(21, 32, 43);">…</body>
r=document.createElement("p")
    <p></p>
r.innerHTML="hi"
    "hi"
document.body.appendChild(r)
    <p>hi</p>
y=document.body
    <body style="background-color: rgb(21, 32, 43);">…</body>
x==y
    true

我不明白为什么它报告“真”，它应该报告假。

为什么？

非常感谢任何有关如何完成此操作的建议。

新观察：

如果x=document.body

然后将新的<p></p> 添加到body

我愿意x=x.innerHTML

然后做y=document.body.innerHTML

x==y 将报告为真。（为什么？！）

但是：

如果x=document.body 我做x=x.innerHTML

然后将新的<p></p> 添加到body

然后做y=document.body.innerHTML

x==y 会报错。

【问题讨论】：

尝试比较x.textContent和y.textContent。它类似于innerText 或innerHTML，但有一对important differences
@powerc9000 这没有意义，即使x.innerHTML==y.innerHTML 报告是真的
@Shayan 两个变量都设置为正文，因此都更新了。修改前设置x为document.body.textContent
不确定我是否理解这个问题，但你看过 MutationObserver 吗？ developer.mozilla.org/en-US/docs/Web/API/MutationObserver
@GammaGames 报告错误！好的。泰。还比较 x=document.body.innerHTML y=document.body.innerHTML 报告错误。

标签： javascript html

【解决方案1】：

当您在示例代码中比较 x 和 y 时，您正在检查正文是否等于正文，它们是相同的元素，因此它们将相等。

您可能想将x设置为body的textContent或innerHTML，然后修改后以相同的方式进行比较。

您也可以使用mutation observer 来监听 DOM 更改，而不是在特定时刻。

【讨论】：

所以我需要注入 x=document.body，重新加载我正在尝试监控更改的实际网页，并以某种方式将 x 变量存储在某处，然后将重新加载的新网页与旧变量，关于如何做到这一点的任何想法？老实说，我认为没有扩展是不可能的，除非我使用 jQuery 将实际网页加载到另一个网页中，然后执行上述所有操作。
@Shayan 你也许可以将它存储在 cookie 或其他东西中，但扩展可能是最好的方法。