Есть ли прослушиватель изменений JavaScript/jQuery DOM?

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

этот ответ теперь устарел. Просмотреть ответ apsillers.

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

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

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

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

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

• mutationobserver'а (docs) буквально обнаружить изменения DOM:

  • как изменить содержимое HTML при загрузке на странице
  • производительность mutationobserver'а для обнаружения узлов в дом.

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

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

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

• клоакинг история API внутри вводят дом скрипт:

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

  
  

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

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

• манифест.в JSON:
  объявить фон / страница событий
  объявить скрипт контент
  добавить "tabs" разрешение.

• фон.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');
      }
  });
  

• содержание.js

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

другой подход в зависимости от того, как вы меняете разд. Если вы используете 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.

в дополнение к "сырым" инструментам, предоставляемым MutationObserver API, существуют библиотеки "удобства" для работы с мутациями 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);
}