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

Question

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

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

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

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

如何检测 DOM 的添加并对插入的元素使用react？

Answer 1

如果您想检测 AJAX 创建的节点，您的选择(除了您明智地排除的 Mutation 事件之外)是:

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

我一次完成了所有这些，但除了一个之外，所有的都有主要缺点:

1. 拼接到页面的 javascript 并不总是那么容易(尤其是使用匿名函数)，通常需要对该代码进行复杂的解构，而且非常脆弱。页面的 javascript 更改，恕不另行通知。
2. Hook 到页面的 AJAX 请求有时非常容易，但跨沙箱屏障传输信息通常会带来更多麻烦，而不是它的值(value)。
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);