After careful consideration, I believe I have devised a solution to address your issue. This solution entails utilizing the MutationObserver API to identify modifications in the iFrame's DOM structure.
The MutationObserver offers developers a means to respond to changes within a
DOM environment. It serves as a substitute for the Mutation Events specified in
the DOM3 Events standard.
In addition, I incorporated the window.postMessage API to send notifications to the parent page once the MutationObserver detects any relevant DOM events, enabling the parent page to take appropriate action.
Below is a simple demonstration I have created. Please bear in mind that I used * for origin designation, but it is advisable to conduct origin verification checks for security purposes. It is worth noting that Chrome may restrict frame access to other frames on local file systems, however, this setup should function properly on a web server or when testing locally using FireFox which does not impose such restrictions.
iframe.html
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == 'childList') {
if (mutation.addedNodes.length >= 1) {
if (mutation.addedNodes[0].nodeName != '#text') {
window.parent.postMessage("DOMChanged", "*");
}
} else if (mutation.removedNodes.length >= 1) {
window.parent.postMessage("DOMChanged", "*");
}
} else if (mutation.type == 'attributes') {
window.parent.postMessage("DOMChanged", "*");
}
});
});
var observerConfig = {
attributes: true,
childList: true,
characterData: true
};
// listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);
</script>
</body>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input type="submit" value="Update iFrame" onclick="updateiFrameDOM()" />
</div>
<iframe src="iframe.html" id="iframeResult"></iframe>
<script>
function updateiFrameDOM() {
var ifr = document.getElementById("iframeResult");
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
var div = document.createElement("div");
var text = document.createTextNode("Hello");
div.appendChild(text);
var body = ifrw.document.getElementsByTagName("body")[0];
body.appendChild(div);
}
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent, function(e) {
console.log(e.data);
}, false);
</script>
</body>
</html>
I referred to some additional sources for this solution:
Respond to DOM Changes with Mutation Observers
window.postMessage Tip: Child-To-Parent Communication
I trust that this guidance proves beneficial to you.