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

Question

我在这个问题上惹恼了我。

在浏览器中加载HTML文档后，我希望能够进行监控 该页面，以防其中的任何内容因任何原因发生变化。

是否有Javascript功能，我可以跟踪'有什么功能 在网页上更改了'。这应该与HTML页面上的内容类型无关。

我有两个例子供你思考：

练习1：

在HTML文档中说有两个选择框s1和s2。 s2中的项目列表取决于s1中的选择（页面不是 刷新 - 也就是说，s2是通过Ajax或其他东西加载的。 因此，在HTML页面加载后，我需要在s2时收到通知 填充...

练习2：

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

在所有这些讨论中，我没有考虑到任何特定的问题 HTML格式...... HTML内容可以是任何东西......我只需要 如果页面加载后内容发生任何变化，请继续跟踪...

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

Answer 1

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

这可能会引发很多事件。但是，使用onblur并不一定会告诉您文本框中的更改，而且onchange的浏览器覆盖率最多也是不稳定的。

Answer 2

如果您使用的是AJAX，则可以设置响应功能来处理本土“事件监听”系统。因此，在响应完成它需要做的事情后，它可以调用任何已注册的方法，并在必要时传入响应文本。

因此，从上面的例子中，在Ex1中，当AJAX从S1返回时，它将加载S2，然后调用一个说S2已经改变的方法。在Ex2中，当新的AJAX返回DIV的内容时，在将其加载到DIV之后，它会调用另一种方法（或者可能根据您的尝试做同样的方法），并提醒DIV有新内容。

Answer 3

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

这可能无法捕获表单元素中的更改，但对于这些更改，可以更轻松地遍历页面上每个表单中的所有表单元素。

以下是我在Google上找到的某人差异功能：http://snowtide.com/jsdifflib