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

Question

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

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

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

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

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

Answer 1

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

1. опроса с интервалом или таймером.
2. Попытка подключиться к запросам AJAX на странице (если есть).
3. Склеивание, захват или замена javascript страницы.

Я сделал все это в одно время, и все, кроме одного, имеют серьезные недостатки:

1. Сращивание в JavaScript на страницы не всегда легко (особенно с анонимными функциями), как правило, требует сложной деконструкции от этого кода, и хрупкий, как черт. Javascript страницы меняется без предварительного уведомления.
2. Взаимодействие с запросами AJAX на странице может быть довольно простым, но передача информации через барьер песочницы обычно приводит к большим проблемам, чем это стоит.
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);