如何在页面加载后跟踪 HTML 页面上的内容更改答案

【问题标题】：How can I track changes in content on an HTML page after page has loaded如何在页面加载后跟踪 HTML 页面上的内容更改
【发布时间】：2014-09-20 03:41:32
【问题描述】：

我正在为此绞尽脑汁。

在浏览器中加载 HTML 文档后，我希望能够监控以防页面上的任何内容因任何原因发生更改。

是否有一个 Javascript 函数可以用来跟踪“有什么更改”在网页上。这应该与 HTML 页面上的内容类型无关。

我有两个例子供你思考：

Ex1：

假设在一个 HTML 文档中有两个选择框 s1 和 s2。 s2 中的项目列表取决于 s1 中的选择（页面不是 refreshed — 即 s2 是通过 Ajax 或其他方式加载的）。因此，在 HTML 页面加载后，我需要在 s2 时收到通知已填充...

Ex2：

比如说，在一个 HTML 页面中，有一个链接，Onclicking 会弹出一个光 div 是用一些文本创建的。如何捕获此动态弹出窗口的内容？

在所有这些讨论中，我没有考虑任何特定的 HTML 格式...HTML 内容可以是任何内容...我只需要继续跟踪页面加载后是否有任何内容更改...

理想情况下，我需要使用 JavaScript（客户端脚本）。我怎样才能做到这一点？

【问题讨论】：

标签： html ajax

【解决方案1】：

您可以使用 onkeyup 跟踪文本框中的更改。每当有人在给定的文本框中进行更改时，这都会告诉您。

这可能会触发大量事件。但是，使用 onblur 不一定会告诉您文本框的变化，而且 onchange 的浏览器覆盖范围充其量是参差不齐的。

【讨论】：

onkeyup 将捕获更改，以防用户在框中键入“in”，但如果 textox 由页面上的外部事件填充...比如说“用户输入总和”的文本框' 根据其他文本框的输入自动填充..那么这个内容将不会被捕获:( ...我正在寻找的是适用于所有情况或大多数情况的通用解决方案

【解决方案2】：

如果您使用 AJAX，您可以设置响应函数来处理自制的“事件监听”系统。因此，在响应完成了它需要做的事情之后，它可以调用任何向它注册的方法，并在必要时传入响应文本。

所以从你上面的例子来看，在 Ex1 中，当 AJAX 从 S1 返回时，它会加载 S2，然后调用一个方法说 S2 已更改。在 Ex2 中，当新的 AJAX 返回 DIV 的内容时，在将其加载到 DIV 后，它会调用不同的方法（或者可能相同，具体取决于您尝试执行的操作）并提醒它 DIV 有新内容。

【讨论】：

如果我不知道 ajax 调用的确切性质，那么我无法处理响应。我正在寻找的解决方案是通用的，适用于任何类型的内容更改，无论是文本节点还是表单元素的值。

【解决方案3】：

您可以将“观察者”脚本设置为计时器，在当前 document.body.innerHTML 上运行差异函数，并在加载时捕获存储的版本。根据 diff 运行的速度，您可以了解要使用的计时器间隔。

这可能无法捕捉表单元素的变化，但对于这些变化，更容易遍历页面上每个表单中的所有表单元素。

这是我在 Google 上找到的某人的 diff 函数：http://snowtide.com/jsdifflib

【讨论】：