如何在新创建的窗口中使用MutationObserver

MutationObserver 是一个 JavaScript API，用于监视 DOM 中的变化。它可以观察到 DOM 的结构变化、属性变化、文本内容变化等，并在变化发生时执行相应的回调函数。

MutationObserver 的使用步骤如下：

创建一个 MutationObserver 对象，传入一个回调函数作为参数。回调函数将在 DOM 变化时被调用。
使用 MutationObserver 的 observe() 方法来指定要观察的目标节点以及要观察的变化类型。
当指定的 DOM 变化发生时，回调函数将被触发执行。

以下是一个示例代码，演示如何在新创建的窗口中使用 MutationObserver：

// 创建一个 MutationObserver 对象，传入回调函数
const observer = new MutationObserver((mutationsList, observer) => {
  // 在这里处理 DOM 变化的回调逻辑
  console.log('DOM 变化了！');
});

// 获取要观察的目标节点
const targetNode = document.querySelector('body');

// 使用 MutationObserver 的 observe() 方法开始观察目标节点的变化
observer.observe(targetNode, { childList: true, subtree: true });

// 创建新窗口
const newWindow = window.open();

// 在新窗口中进行 DOM 操作，触发变化
newWindow.document.body.innerHTML = '<h1>Hello, World!</h1>';

在上述示例中，我们首先创建了一个 MutationObserver 对象，并传入一个回调函数。然后，通过 document.querySelector() 方法获取要观察的目标节点，这里选择了 <body> 元素。接下来，使用 MutationObserver 的 observe() 方法开始观察目标节点的变化，通过传入 { childList: true, subtree: true } 参数，指定要观察子节点的添加或删除以及整个子树的变化。

最后，我们创建了一个新窗口，并在新窗口中进行 DOM 操作，这将触发目标节点的变化。当变化发生时，回调函数将被触发执行，输出 'DOM 变化了！'。

腾讯云相关产品中，与 MutationObserver 相关的推荐产品是腾讯云 Web+，它是一款支持静态网站托管和动态网站托管的云服务产品。您可以通过 Web+ 在腾讯云上快速部署和管理您的网站，并使用 MutationObserver 监听网页的变化。

更多关于腾讯云 Web+ 的信息，请访问：腾讯云 Web+