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

Question

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

如果我在添加的元素中添加事件监听器,我可以使用JQuery delegate().因为我只是想在加载时更改内容,这似乎不合适.

变异事件似乎符合要求.它们是Gecko特有的,但这对于Greasemonkey脚本来说并不重要.问题是,它们已被折旧并且有一系列非常好的理由.

当然我可以使用计时器并定期轮询DOM,但这看起来很蹩脚.

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

Answer 1

如果你想检测AJAX创建的节点你的选择(除了你明智要排除的Mutation事件)是:

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