javascript - 树镜像js和变异摘要支持iframe吗？

Question

我一直在使用一个名为 tree-mirror.js 的开源库它使用 mutation-summary.js进行 DOM 镜像。

一切都很好，除了 iframe。当主文档包含 iframe 时，iframe 中文档的 dom 更改不会被这些库捕获。通过阅读 tree-mirror.js 的代码我可以弄清楚什么是它将突变观察器绑定(bind)到主文档，但不知道这是否也可以自动处理 iframe 文档。

我不确定这是否不受库支持或者我遗漏了一些东西。有人使用这些库并遇到过这个问题吗？请帮忙。

Answer 1

编辑:感谢wOxxOm在之前的回答中指出了错误的结论。

简而言之，MutationObserver API 似乎不支持观察 iframe 内部的变化。考虑以下示例:

var m = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation) 
  });
});

// We observe child list and subtree changes
m.observe(document.body, {childList: true, subtree: true});

// Let's create an iframe
var iframe = document.createElement("iframe");

// A mutation record will be logged here
document.body.appendChild(iframe);

// However this will NOT log a mutation record
iframe.contentDocument.body.appendChild(document.createElement("div"));

所以我担心你在这里运气不好。就像上面的评论中所说的那样，您必须在每个 iframe 内初始化一个新的突变观察器才能观察它们的 DOM 更改。提到的库都不支持这一点，因为它们主要是 native MutationObserver API 的包装器。