Как я могу обнаружить вставку узла AJAX без использования событий мутации DOM?

Question

Я пытаюсь написать скрипт Greasemonkey, который изменяет ключевые слова в постах Twitter. Проблема в том, что контент "запаздывает" и добавляется по запросу пользователей.

Если бы я добавлял прослушиватели событий к добавленным элементам, я мог бы использовать JQuery delegate(), Поскольку я просто хочу изменить содержимое при загрузке, это не подходит.

События мутации, кажется, отвечают всем требованиям. Они специфичны для Gecko, но это не имеет большого значения для скрипта Greasemonkey. Проблема в том, что они обесценились и по ряду очень веских причин.

Конечно, я мог бы использовать таймер и опрашивать DOM через регулярные промежутки времени, но это просто кажется странным.

Как я могу обнаружить дополнения к DOM и реагировать на вставленные элементы?

Answer 1

Если вы хотите обнаруживать AJAX-созданные узлы, ваши параметры (помимо событий мутации, которые вы должны исключить):

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