如何在不使用 DOM 突变事件的情况下检测 AJAX 节点插入

How can I detect AJAX node insertion without using DOM mutation events?

本文关键字：情况下 检测 AJAX 插入 节点 事件 突变 DOM      更新时间：2023-09-26

我正在尝试编写一个Greasemonkey脚本来更改Twitter帖子中的关键字。问题是，内容是"延迟加载"的，并根据用户的要求添加。

如果我将事件侦听器添加到添加的元素中，我可以使用 JQuery 的 delegate() 。由于我只想在加载时更改内容，因此这似乎不合适。

突变事件似乎符合要求。它们是壁虎特有的，但这对 Greasemonkey 脚本来说并不重要。问题是，它们已经贬值了，并且有一系列很好的理由。

当然，我可以使用计时器并定期轮询 DOM，但这似乎很恶心。

如何检测 DOM 的添加并对插入的元素做出反应？

如果要检测 AJAX 创建的节点，您的选项(除了明智地排除的突变事件(是：

  1. 使用间隔或计时器进行轮询。
  2. 尝试挂钩到页面的 AJAX 请求(如果有(。
  3. 拼接到、劫持或替换页面的 javascript。

我已经一次完成了所有这些，除了一个之外，所有都有主要缺点：

  1. 拼接到页面的javascript并不总是那么容易(尤其是匿名函数(，通常需要对该代码进行复杂的解构，而且很脆弱。 页面的 JavaScript 更改恕不另行通知。
  2. 挂钩到页面的 AJAX 请求有时非常容易，但跨沙盒屏障传输信息通常会使其变得比它的价值更麻烦。
  3. 轮询在实践中效果很好，易于实现，而且通常成本低。

我建议您使用 waitForKeyElements(( 实用程序并完成它。它非常易于使用。 例如：

// ==UserScript==
// @name    Highlight good comments
// @include http://SOME_SITE/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==
function highlightGoodComments (jNode) {
    if (/beer/i.test (jNode.text () ) ) {
        jNode.css ("background", "yellow");
    }
}
waitForKeyElements ("#userBlather div.comment", highlightGoodComments);
相关文章：