3

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

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

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

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

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

4

1 回答 1

8

如果您想检测 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);
于 2012-05-19T11:53:10.903 回答