Есть слушатель изменения DOM JavaScript / jQuery?

Редактировать

Этот ответ устарел. См. Ответ апсиллеров .

Так как это расширение Chrome, вы можете также использовать стандартное событие DOM - DOMSubtreeModified. Смотрите поддержку этого события во всех браузерах. Он поддерживается в Chrome с 1.0.

$("#someDiv").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

См. Рабочий пример здесь .

Другой подход в зависимости от того, как вы меняете div. Если вы используете JQuery для изменения содержимого div с помощью его метода html (), вы можете расширить этот метод и вызывать функцию регистрации каждый раз, когда помещаете html в div.

(function( $, oldHtmlMethod ){
    // Override the core html method in the jQuery object.
    $.fn.html = function(){
        // Execute the original HTML method using the
        // augmented arguments collection.

        var results = oldHtmlMethod.apply( this, arguments );
        com.invisibility.elements.findAndRegisterElements(this);
        return results;

    };
})( jQuery, jQuery.fn.html );

Мы просто перехватываем вызовы html (), вызываем функцию регистрации с этим, которая в контексте относится к целевому элементу, получающему новое содержимое, затем мы передаем вызов исходному jquery.html () функция. Не забудьте вернуть результаты оригинального метода html (), потому что JQuery ожидает его для цепочки методов.

Для получения дополнительной информации о переопределении и расширении метода, проверьте http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods .htm , где я и написал функцию замыкания. Также ознакомьтесь с руководством по плагинам на сайте JQuery.

В дополнение к «необработанным» инструментам, предоставляемым API MutationObserver , существуют «удобные» библиотеки для работы с мутациями DOM.

Рассмотрим: MutationObserver представляет каждое изменение DOM в терминах поддеревьев. Так что, если вы, например, ожидаете вставки определенного элемента, он может быть глубоко внутри дочерних элементов mutations.mutation[i].addedNodes[j].

Другая проблема заключается в том, что ваш собственный код, реагируя на мутации, меняет DOM - вы часто хотите отфильтровать его.

Хорошей удобной библиотекой, которая решает такие проблемы, является mutation-summary (заявление об отказе: я не автор, я просто довольный пользователь), которая позволяет вам задавать запросы на интересующие вас вопросы. и получите именно это.

Пример базового использования из документов:

var observer = new MutationSummary({
  callback: updateWidgets,
  queries: [{
    element: '[data-widget]'
  }]
});

function updateWidgets(summaries) {
  var widgetSummary = summaries[0];
  widgetSummary.added.forEach(buildNewWidget);
  widgetSummary.removed.forEach(cleanupExistingWidget);
}

Многие сайты используют AJAX для динамического добавления / показа / изменения контента. Иногда он используется вместо навигации внутри сайта, поэтому текущий URL-адрес изменяется программно, и в этом случае браузер не выполняет автоматически скрипты содержимого, поскольку страница не извлекается полностью с удаленного сервера.

Обычные JS-методы обнаружения изменений страницы доступны в скрипте контента .

• MutationObserver ( документы ) для буквального обнаружения изменений DOM:

  • Как изменить содержимое HTML как он загружается на страницу
  • Производительность MutationObserver для обнаружения узлов во всем DOM .

• Прослушиватель событий для сайтов, которые сигнализируют об изменении содержимого путем отправки события DOM:

  • pjax:end на document используется многие сайты на основе pjax, например GitHub,
    , см. Как запустить jQuery до и после загрузки pjax?
  • message на window, например, используемый. Поиск Google в браузере Chrome,
    см. Расширение Chrome обнаруживает обновление поиска Google
  • spfdone в document, используемом Youtube,
    см. Как обнаружить навигацию по страницам на Youtube и изменить HTML перед отображением страницы?

• Периодическая проверка DOM через setInterval :
  Очевидно, что это будет работать только в тех случаях, когда вы ожидаете появления определенного элемента, идентифицируемого его идентификатором / селектором, и не позволит вам универсально обнаруживать новый динамически добавляемый контент, если вы не изобретаете какой-либо метод снятия отпечатков пальцев с существующего содержимого. .

• Скрытие History API внутри внедренного сценария DOM :

  document.head.appendChild(document.createElement('script')).text = '(' +
      function() {
          // injected DOM script is not a content script anymore, 
          // it can modify objects and functions of the page
          var _pushState = history.pushState;
          history.pushState = function(state, title, url) {
              _pushState.call(this, state, title, url);
              window.dispatchEvent(new CustomEvent('state-changed', {detail: state}));
          };
          // repeat the above for replaceState too
      } + ')(); this.remove();'; // remove the DOM script element
  
  // And here content script listens to our DOM script custom events
  window.addEventListener('state-changed', function(e) {
      console.log('History state changed', e.detail, location.hash);
      doSomething();
  });
  

• ] Прослушивание hashchange , popstate событий:

  window.addEventListener('hashchange', function(e) {
      console.log('URL hash changed', e);
      doSomething();
  });
  window.addEventListener('popstate', function(e) {
      console.log('State changed', e);
      doSomething();
  });
  

  
  [1135]

Специфичные расширения: обнаруживать изменения URL на странице фона / страницы события .

Существует расширенный API для работы с навигацией: webNavigation , webRequest , но мы будем использовать простой chrome.tabs.onUpdated прослушиватель событий, который ] отправляет сообщение скрипту содержимого:

• manifest.json:
  объявляет фон / страница события
  ] объявлять скрипт содержания
  добавить "tabs" разрешение . ​​

• background.js

  var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (rxLookfor.test(changeInfo.url)) {
          chrome.tabs.sendMessage(tabId, 'url-update');
      }
  });
  

• content.js

  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
      if (msg === 'url-update') {
          doSomething();
      }
  });