MutationObserver 在 IE11 中挂起

Question

我正在使用 MutationObserver 来检查某些节点何时被删除并被元素的其他新节点替换。

以下代码在 Chrome 中运行良好，但在 IE11 上它只是挂起。

如果我用 removedNodes 更改 addedNodes 检查，它适用于 IE11。我只是不明白为什么当我检查添加的新节点时它会挂起。

有什么想法吗？我找不到有关此问题的任何资源。

var nodeToObserve = document.querySelector('#targetNode');

var callback = function(mutations, observer) {
  for (var index = 0; index < mutations.length; index) {
    var mutation = mutations[index];
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      console.log(mutation);
      break;
    }

  }
  observer.disconnect();
}
const observer = new MutationObserver(callback);

observer.observe(nodeToObserve, {
  childList: true, // target node's children
  subtree: true // target node's descendants
});

html, body {
  height: 100%;
}

#targetNode {
  border: 1px solid black;
  height: 100%;
}

.childNode {
  //height: 20px;
  background-color: blue;
  margin: 10px;
  padding: 10px;
}

.grandChildNode {
  height: 20px;
  background-color: red;
  margin: 10px;
}

<div id="targetNode">

</div>

Answer 1

您没有在 for 循环中递增 index。根据浏览器的不同，结果可能会以不同的顺序显示，因此 if 语句将在某些浏览器上触发，而在其他浏览器上则不会。这样，死循环的if语句没有执行b/c，系统就会挂起。

MutationObserver 在 IE11 中挂起

MutationObserver hangs in IE11

javascript

jquery

mutation-observers

internet-explorer-11