javascript - 如何使用jquery监听页面上的 "meta"属性变化？

Question

我正在编写一个 chrome 扩展，我想在其中监听页面上的 DOM 变化。最初，当页面加载时，“头部”有

<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