MutationServer如何监听创建iframe的操作-Go服务器开发

在 JavaScript 中，MutationObserver 是一个用于观察 DOM 变动的 API，可以用来监听元素的添加、删除和属性变化。如果你想要监听特定操作，例如创建 iframe 元素，可以使用 MutationObserver 来实现。以下是如何设置和使用 MutationObserver 监听 iframe 创建的示例。

示例代码

// 创建一个 MutationObserver 实例
const observer = new MutationObserver((mutationsList, observer) => {
    for (let mutation of mutationsList) {
        // 判断是否是子节点添加了新节点
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                // 检查新添加的节点是否为 iframe
                if (node.nodeName === 'IFRAME') {
                    console.log('新的 iframe 被创建:', node);
                    // 在这里可以执行其他操作，比如记录、修改等
                }
            });
        }
    }
});

// 配置观察选项：需要观察子节点的变化
const config = { childList: true, subtree: true };

// 启动观察，目标是 document.body 或者其他具体元素
observer.observe(document.body, config);

// 可选：在适当的时候停止观察，例如：
/* 
observer.disconnect();
*/

解释

创建 MutationObserver:
- 使用 new MutationObserver(callback) 创建一个新的观察者实例，其中 callback 是当所监视的 DOM 发生变化时调用的函数。
配置选项:
- 在 config 中，设置 { childList: true, subtree: true } 表示要观察子节点的变化，并且包括整个 DOM 树（subtree）。
启动观察:
- 调用 observe(targetNode, config) 方法开始监视指定节点，这里以 document.body 为例，你也可以选择其他具体的容器元素。
处理变更事件:
- 当有新的子节点被添加时，回调函数会触发。在该函数中，我们检查所有新增节点，如果它们是 <iframe> 元素，就可以进行相应处理。
停止观察:
- 如果不再需要监听，可以通过调用 observer.disconnect() 停止观察。