Gibt es einen JavaScript - / jQuery-DOM-change-listener?

Einige Jahre später, es ist jetzt offiziell eine bessere Lösung. DOM4-Mutation Beobachter sind der Ersatz für veraltete DOM3-mutation-events. Sie sind derzeit in modernen Browsern als MutationObserver (oder wie das vendor-Präfix WebKitMutationObserver in alten Versionen von Chrome):

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    //fired when a mutation occurs
    console.log(mutations, observer);
    //...
});

//define what element should be observed by the observer
//and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

Diesem Beispiel wartet auf DOM-änderungen auf document und seine gesamte Teilstruktur, und es wird Feuer über die Veränderungen der element-Attribute als auch strukturelle Veränderungen. Der Entwurf spec hat eine vollständige Liste der gültigen mutation Hörer-Eigenschaften:

childList

• Eingestellt true wenn die Mutationen zum Ziel, die Kinder zu beobachten sind.

Attribute

• Eingestellt true wenn Mutationen zu target-Attribute sind zu beachten.

characterData

• Eingestellt true wenn die Mutationen zum Ziel, die Daten sind zu beachten.

Teilbaum

• Eingestellt true wenn Mutationen nicht nur Ziel, sondern auch Ziel-die Nachkommen sind zu beachten.

attributeOldValue

• Eingestellt true wenn attributes auf true gesetzt ist und Ziel-Attribut-Wert vor der mutation muss aufgezeichnet werden.

characterDataOldValue

• Eingestellt true wenn characterData auf true gesetzt ist und Ziel-Daten vor der mutation muss aufgezeichnet werden.

attributeFilter

• Eingestellt, um eine Liste der Attribut-lokalen Namen (ohne namespace), wenn nicht alle Attribut-Mutationen müssen beachtet werden.

(Diese Liste ist auf dem Stand April 2014; Sie können überprüfen Sie die Spezifikation für die änderungen.)

InformationsquelleAutor apsillers

Viele Seiten die AJAX verwenden, um hinzufügen/anzeigen/ändern der Inhalte dynamisch an. Es wird manchmal verwendet, anstelle von in-site-navigation, also die aktuelle URL programmgesteuert geändert wird und Inhalte, die Skripts werden nicht automatisch ausgeführt, indem Sie den browser in diesem Fall, da die Seite nicht abgerufen, die von remote-server vollständig.

Üblichen JS-Methoden der Aufdeckung von änderungen der Seiten erhältlich in einer Inhalt Skript.

• MutationObserver (docs) wörtlich zu erkennen, DOM-änderungen:

  • So ändern Sie die HTML-Inhalte, wie es ist, laden auf der Seite
  • Leistung von MutationObserver, um zu erkennen, Knoten im gesamten DOM.

• Ereignis-listener für Websites, die signal-content-änderung durch senden einer DOM-event:

  • pjax:end auf document von vielen pjax-basierte Seiten wie z.B. GitHub,
    
    sehen Wie zum ausführen von jQuery-vor und nach einer pjax laden?
  • message auf window verwendet, die von z.B. Google-Suche im Chrome-browser,
    
    sehen Chrome-Erweiterung erkennt Google search aktualisieren
  • spfdone auf document verwendet von Youtube,
    
    sehen Zu erkennen, wie die Seitennavigation auf Youtube und Bearbeiten von HTML, bevor die Seite gerendert wird?

• Periodische überprüfung der DOM über setInterval:
  
  Natürlich wird dies nur in Fällen, wenn Sie warten, für ein bestimmtes element, gekennzeichnet durch seine id/selector zu erscheinen, und es wird nicht lassen Sie universell erkennt dynamisch neue Inhalte Hinzugefügt, es sei denn, Sie erfinden eine Art von Fingerabdruck, den vorhandenen Inhalt.

• Cloaking History API innerhalb einer injiziert DOM-Skript:

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

• Hören hashchange, popstate Veranstaltungen:

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

Erweiterungen-spezifische: Erkennung von URL-änderungen in einem hintergrund /event-Seite.

Gibt es erweiterte API zum arbeiten mit navigation: webNavigation, webRequest, aber wir verwenden einfach chrome.tabs.onUpdated Ereignis-listener, der sendet eine Nachricht für das content-Skript:

• manifestieren.json:
  
  erklären hintergrund/Ereignis-Seite
  
  erklären Inhalt Skript
  
  hinzufügen "tabs" Erlaubnis.

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

InformationsquelleAutor wOxxOm

Zusätzlich zu den "raw" - tools von MutationObserver - API gibt es "Bequemlichkeit" Bibliotheken für die Arbeit mit DOM-Mutationen.

Betrachten: MutationObserver stellt jedes DOM-änderung in Bezug auf die Teilbäume. Also, wenn Sie, zum Beispiel, wartet für einen bestimmten element eingefügt werden, kann es tief im inneren der Kinder mutations.mutation[i].addedNodes[j].

Anderes problem ist wenn Sie Ihren eigenen code, der als Reaktion auf Mutationen, Veränderungen DOM - Sie wollen oft, um es zu filtern aus.

Einen guten convenience-Bibliothek, die löst solche Probleme ist mutation-Zusammenfassung (disclaimer: ich bin nicht der Autor, nur ein zufriedener user), die können Sie angeben, Abfragen, was Sie interessiert sind, und bekommen genau das.

Grundlegende Bedienung Beispiel aus den docs:

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

InformationsquelleAutor Xan