如何使用jQuery在页面上收听“元”属性更改？

Question

I am writing a chrome extension where I want to listen to the DOM change on the page. Initially when the page loads the "head" has

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

but after clicking on another link, the page does an ajax and changes the DOM.

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

I have this code to listen to changes in the head. But it doesn't capture the change.

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

How can I listen and capture this change?

When I do var title = $('meta[property=og\\\\:title]').attr("content");

The title is always "XYZ" and it doesn't change to "ABC"

Answer 1

You can use MutationObserver to listen to any change made to the <meta> element.

For example:

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

See also: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

Not clear how you change the meta tag value. but as you said, when the link is clicked there will be an ajax call and then it will change the meta tag. IF so you can capture the ajax complete event and get the value of the meta tag.

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

In your Chrome Extension you can use following code

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