Does tree mirror js and mutation summary supports iframe?

Question

I have been using an open source library called tree-mirror.js which uses mutation-summary.js to do the DOM mirroring.

Everything is good but iframes. When the main document contains an iframe, the dom changes to the document with in the iframe are not captured by these libraries. What I could figure out from reading the code of tree-mirror.js is that it binds mutation observer to the main document but did not understand if this can handle the iframe documents also automatically.

I am not sure if this is not supported by the libraries or I am missing something. Did anyone work with these libraries and encountered this issue? Kindly help.

Answer 1

Edit: Thanks wOxxOm for pointing out wrong conclusions in the previous answer.

In short, observing the changes inside iframe doesn't seem to be supported by the MutationObserver API. Consider the following example:

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"));

So I'm afraid you're out of luck here. Like said in the comments above you would have to initialize a new mutation observer inside each iframe to be able to observe their DOM changes. None of the libraries mentioned support this as they are mostly wrappers for the native MutationObserver API.