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

Question

我正在尝试编写一个改变Twitter帖子中关键字的Greasemonkey脚本。麻烦的是，内容是“延迟加载”，并在用户请求时添加。

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

突变事件似乎符合要求。它们是Gecko特有的，但这对于Greasemonkey脚本来说并不重要。问题是，they have been depreciated和一组very good reasons。

当然我可以使用计时器并定期轮询DOM，但这看起来很蠢。

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

Answer 1

如果你想检测AJAX创建的节点你的选择（除了你明智要排除的Mutation事件）：

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

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

1. 拼接到页面的javascript并不总是那么容易（特别是对于匿名函数），通常需要对代码进行复杂的解构，并且很容易。页面的javascript会发生变化，恕不另行通知。
2. 挂钩页面的AJAX请求有时候非常简单，但是通过沙盒屏障传输信息通常会使它比它的价值更麻烦。
3. 投票工作在实践中很好，实施起来很简单，而且成本通常很低。

我建议你使用the waitForKeyElements() utility并完成它。 它非常易于使用。例如：

// ==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);