JavaScript / jQuery DOM değişiklik dinleyicisi var mı?

Temelde ben bir komut dosyası bir DIVdeğişiklik içeriği yürütmek istiyorum . Komut dosyaları ayrı olduğundan (Chrome uzantısı ve web sayfası komut dosyasında içerik komut dosyası), DOM durumundaki değişiklikleri gözlemlemenin bir yoluna ihtiyacım var. Oylama ayarlayabilirdim ama bu özensiz görünüyor.

Uzun zamandır, DOM3 mutasyon olayları mevcut en iyi çözümdü, ancak performans nedenlerinden dolayı kullanımdan kaldırıldı. DOM4 Mutasyon Gözlemcileri , kullanımdan kaldırılmış DOM3 mutasyon olaylarının yerine geçer. Onlar edilir anda modern tarayıcılarda uygulanmaktadır olarak MutationObserver(ya da satıcı-öneki WebKitMutationObserverChrome eski sürümlerinde):

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

Bu örnek, DOM değişikliklerini documentve tüm alt ağacını dinler ve eleman özelliklerindeki değişikliklerin yanı sıra yapısal değişikliklere de neden olur. Taslak spesifikasyon, geçerli mutasyon dinleyici özelliklerinin tam listesine sahiptir :

öğelistesindebirden

• Ayarlayın truehedefin çocuklara mutasyonlar gözlenebilir istiyorsak.

Öznitellikler

• Ayarlayın truehedefin özelliklerine mutasyonlar gözlenebilir istiyorsak.

characterData

• Ayarlayın truehedefin verilerine mutasyonlar gözlenebilir istiyorsak.

alt ağaç

• trueSadece mutasyonların değil, aynı zamanda hedefin torunları da gözlemlenecek mutasyonlara ayarlayın .

attributeOldValue

• Ayarla trueeğer attributesmutasyon ihtiyaçları kaydedilecek önce gerçek ve hedef öznitelik değerine ayarlanır.

characterDataOldValue

• Ayarla trueeğer characterDatamutasyon ihtiyaçları kaydedilecek önce doğru ve hedef verilerine ayarlanır.

attributeFilter

• Tüm özellik mutasyonlarına uyulması gerekmiyorsa, özellik yerel adları listesine (ad alanı olmadan) ayarlayın.

(Bu liste Nisan 2014 itibariyle geçerlidir; herhangi bir değişiklik için teknik özellikleri kontrol edebilirsiniz.)

Düzenle

Bu cevap şimdi kullanımdan kaldırıldı. Cevap verenler tarafından verilen cevaba bakınız .

Bu bir Chrome uzantısı için olduğundan, standart DOM etkinliğini de kullanabilirsiniz - DOMSubtreeModified. Tarayıcılarda bu etkinliğin desteğine bakın . 1.0'dan beri Chrome'da desteklenmektedir.

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

Burada çalışan bir örneğe bakın .

Birçok site dinamik olarak içerik eklemek / göstermek / değiştirmek için AJAX kullanır. Bazen site içi gezinme yerine kullanılır, dolayısıyla mevcut URL programlı olarak değiştirilir ve sayfa tamamen uzak sunucudan getirilmediğinden içerik komut dosyaları tarayıcı tarafından otomatik olarak yürütülmez.

Bir içerik komut dosyasında bulunan sayfa değişikliklerini algılamaya yönelik genel JS yöntemleri .

• DOM değişikliklerini tam anlamıyla algılamak için MutationObserver ( docs ):

  • HTML içeriği sayfaya yüklenirken nasıl değiştirilir?
  • Tüm DOM'daki düğümleri tespit etmek için MutationObserver'ın performansı .

• Bir DOM etkinliği göndererek içerik değişikliğine işaret eden siteler için olay dinleyicisi :

  • pjax:endüzerinde documentbirçok pjax tabanlı siteler mesela GitHub'dan kullandığı,
    bkz önce ve bir pjax yüklemesinden sonra jQuery nasıl çalıştırılır?
  • messageüzerinde windowChrome tarayıcısında örneğin Google arama tarafından kullanılan,
    bkz Chrome uzantısı Google arama yenileme algılamak
  • spfdoneüzerinde documentYoutube tarafından kullanılan,
    bkz sayfa oluşturulmadan önce Youtube ve modify HTML sayfa navigasyonu algılamak nasıl?

• DOM'un setInterval yoluyla periyodik kontrolü :
  Açıkçası bu, yalnızca kimliği / seçicisi tarafından tanımlanan belirli bir öğenin görünmesini beklediğiniz durumlarda çalışır ve bir tür parmak izi icat etmedikçe, evrensel olarak yeni eklenen içeriği tespit etmenize izin vermez mevcut içerik.

• Gizleme Tarih API iç enjekte DOM komut :

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

• Dinleme hashchange , popstate olaylar:

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

  
  

Uzantılara özgü: bir arka plan / etkinlik sayfasındaki URL değişikliklerini algılar .

Gezinme ile çalışmak için gelişmiş API vardır: webNavigation , webRequest , ancak içerik komut dosyasına mesaj gönderen basit chrome.tabs.onUpdated olay dinleyicisini kullanacağız :

• manifest.json:
  declare background / event page içerik
  bildirimi betiği izin
  ekle ."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();
      }
  });

Div'i nasıl değiştirdiğinize bağlı olarak başka bir yaklaşım. Bir div'in içeriğini html () yöntemiyle değiştirmek için JQuery kullanıyorsanız, bu yöntemi genişletebilir ve html'yi div'a her yerleştirdiğinizde bir kayıt işlevini çağırabilirsiniz.

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

Biz sadece html () çağrılarını keseriz, bununla bir kayıt işlevi çağırırız, bu bağlamda yeni içerik elde eden hedef öğeyi ifade eder, daha sonra çağrıyı orijinal jquery.html () işlevine aktarırız. Orijinal html () yönteminin sonuçlarını döndürmeyi unutmayın, çünkü JQuery bunu yöntem zincirlemesi için bekler.

Yazdırma metodu ve uzatma hakkında daha fazla bilgi için check out http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm nerede olduğu Kapatma işlevini kopyaladım. Ayrıca JQuery'nin sitesindeki eklentiler eğitimine göz atın.

MutationObserverAPI tarafından sağlanan "ham" araçlara ek olarak, DOM mutasyonlarıyla çalışmak için "kolaylık" kitaplıkları da vardır.

Şunu düşünün: MutationObserver, alt ağaçlar açısından her DOM değişikliğini temsil eder. Örneğin, belirli bir öğenin yerleştirilmesini bekliyorsanız, öğelerinin derinliklerinde olabilir mutations.mutation[i].addedNodes[j].

Başka bir sorun, kendi kodunuz mutasyonlara tepki olarak DOM'u değiştirdiğinde - genellikle filtrelemek istediğinizdir.

Bu tür sorunları çözen iyi bir kolaylık kütüphanesi mutation-summary(sorumluluk reddi: Yazar değilim, sadece memnun bir kullanıcıyım), ilgilendiğiniz şeyleri sorgulamanızı ve tam olarak bunu almanızı sağlar.

Dokümanlardan temel kullanım örneği:

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