如何在不使用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);