4

我正在尝试编写一个简单的 chrome 扩展来更改 DOM 中表的值。这里重要的是网页正在使用 ajax 命令来构建和更改该表的内容。（首先，在页面。然后您单击一个链接，并通过 ajax 请求（不重新加载页面）创建一个表，然后通过单击其他链接，该表将被修改）。

这是我用来收听表格更改的代码：

var target = document.querySelector('#my-table');

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        alert('The table has appeared');
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
};

observer.observe(target, config);

observer.disconnect();

问题是，当我在页面中按下使表格更改的链接时，什么都不会发生。当我检查 chrome 的控制台以调试我的工作时，我看到它在页面加载后立即给了我这个错误：

未捕获的 NotFoundError：无法在“MutationObserver”上执行“观察”：提供的节点为空

我真的很迷茫，不知道该怎么办。有人有什么建议吗？ps：这是我的扩展清单文件：

"manifest_version": 2,

  "name": "MyExtension",
  "description": "Testing the Content Script api",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["www.myWebsite.com"],
      "js": ["script.js"]
    }
  ],

  "browser_action": {
    "default_icon": "icon.png"
  }
}
4

1 回答 1

8

您需要在突变后重新评估选择，依次检查每个添加的元素。

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      mutation.addedNodes.forEach(function(node) {
        if (node.id == 'my-table') { // or node.getElementsByClassName(..).length or whatever
          console.log('table has appeared.');
        });
      });
    });
  });
  observer.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false,
  });

效率较低，但代码较短，您可以在每次突变后重新选择整个文档：

  var observer = new MutationObserver(function() {
    if (document.getElementById('my-table')) {
      console.log('table has appeared.');
    }
  });
  observer.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false,
  });

如果您使用的是简单的 ID 选择器，它可能会很有效，因为按 id 选择是高度优化的。

于 2014-11-26T06:37:13.947 回答