如何使用jQuery在頁面上收聽“元”屬性更改？

Question

我正在編寫一個Chrome擴展程序，我想在此聽頁面上的DOM更改。 最初，當頁面加載時，“ head”

<meta property="og:title" content="XYZ">

但是點擊另一個鏈接后，頁面會執行ajax並更改DOM。

<meta property="og:title" content="ABC">

我有這段代碼可以監聽頭部的變化。 但這並沒有捕捉到變化。

$('head').on("DOMSubtreeModified", function(e){
   title = $('meta[property=og\\:title]').attr("content");
   console.log('Title - ' + title);
});

我該如何聆聽和捕捉這種變化？

當我做var title = $('meta[property=og\\\\:title]').attr("content");

標題始終為“ XYZ”，並且不會更改為“ ABC”

Answer 1

您可以使用MutationObserver來監聽對<meta>元素所做的任何更改。

例如：

var ob = new MutationObserver(function(mutations){
  mutations.forEach(function(m){
    if (m.type === 'attributes' && m.attributeName === 'content') {
      // Do something
    }
});

ob.observe($('meta[property=og\\:title]')[0], {attributes: true});

另請參閱： https : //developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

不清楚如何更改元標記值。 但是正如您所說，當單擊鏈接時，將進行ajax調用，然后它將更改meta標簽。 如果是IF，則可以捕獲ajax complete事件並獲取meta標簽的值。

$( document ).ajaxComplete(function() {
   title = $('meta[property=og\\:title]').attr("content");
   console.log('Title - ' + title);
});

在您的Chrome擴展程序中，您可以使用以下代碼

var scriptContent = '(' + function() {
    $(document).ajaxComplete(function() { 
      var title = $('meta[property=og\\:title]').attr("content");
      console.log('Title - ' + title);    
    });
} + ')();';
var script = document.createElement('script');
script.textContent = scriptContent;
(document.head||document.documentElement).appendChild(script);