1

我在 chrome 扩展中有以下代码：

var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
    if (mutation.type === "childList") {
       Log.Debug("mutation: Childlist:"+mutation.addedNodes.length);
        forEach.call(mutation.addedNodes, function (addedNode) {
            if (addedNode.classList !== undefined) {
                if (addedNode.classList.contains('nja')) {
                    Log.Debug("DOM PD:"+addedNode.classList);
                    DoFancyStuff(addedNode);
                }
            }
       }
 }});

这发生在动态添加内容的网站上。（谷歌+）。如果用户向下滚动并添加一些新元素，一切都会完美无缺。

如果用户离开浏览器一段时间并单击导致显示许多新元素的按钮，则 MutationObserver 似乎错过了一些节点。我可以在调试窗口中验证此行为。（一些添加了“nja”类的 div 被写入控制台，有些则没有）

所以对我来说，这似乎只有在一次没有添加太多 div 的情况下才有效。是否有任何配置可以改变这种行为？

（因为这是一个 chrome 扩展，我只需要 chrome 的解决方案，而不需要任何其他浏览器）

4

2 回答 2

1

如果div具有nja该类的 a 是添加的元素的子元素，则此突变观察者将看不到它。

例如，使用突变观察者在页面上执行以下操作：

var added = document.createElement('section');
added.innerHTML = '<div class="nja">nested</div>';
document.body.appendChild(added);

您应该看到观察者将为section元素运行，而不是div.nja.

也许您只需要querySelectorAll对每个添加的元素执行一次。

于 2015-04-13T23:07:13.640 回答
1

大家好，我发现 MutationObserver 在检测 [contenteditable] 元素中的文本更改时非常糟糕。特别是在我使用的 Mac OS Safari 中。

意外地，我发现当我在我的网站上使用 void SetInterval 时，MutationObserver 或多或少地按预期工作，即使在 Safari 中也是如此。

下面是我的小提琴jsfiddle和工作示例。查看控制台输出以查看更改 SetInterval 持续时间时的响应性。还可以尝试注释掉整个 SetInterval 以查看观察者会变得多么糟糕。

var target = document.querySelector('#something');
console.log(target);
var observer = new WebKitMutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var time = new Date();
    console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "." + time.getMilliseconds());
    console.log(target.innerHTML);
  });
});
observer.observe(target, {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
});
//observer.disconnect(); - to stop observing


setInterval(function() {}, 10);
<div id="something" contenteditable>Something</div>

于 2016-03-03T17:01:52.297 回答