使用 MutationObserver 监听页面加载完成后的状态-js教程-PHP中文网

使用 MutationObserver 监听页面加载完成后的状态

碧海醫心

发布： 2025-09-09 19:06:01

原创

643人浏览过

使用 mutationobserver 监听页面加载完成后的状态

使用 MutationObserver 监听页面加载完成后的状态

在Web开发中，经常需要在页面完全加载后执行一些自定义的初始化操作，例如自动填充输入框、绑定事件等。然而，由于页面加载过程中可能存在多个脚本，并且这些脚本的执行顺序无法完全控制，因此直接使用 window.onload 或 DOMContentLoaded 事件可能会导致某些元素尚未加载完成，从而引发 "element not found" 错误。

为了解决这个问题，可以使用 MutationObserver 来监听页面上特定元素出现的状态。MutationObserver 是一种用于监视DOM树变化的API，它可以在DOM树发生变化时触发回调函数。

具体实现步骤如下：

创建 MutationObserver 实例：
```
const observer = new MutationObserver(function (mutationsList) {
  // 当DOM树发生变化时，该回调函数会被触发
});
```
登录后复制
MutationObserver 的构造函数接收一个回调函数作为参数，该回调函数会在DOM树发生变化时被调用。mutationsList 参数是一个包含所有变化的 MutationRecord 对象的数组。
定义回调函数：

在回调函数中，检查目标元素是否存在。如果存在，则执行初始化函数，并断开 MutationObserver 的连接。
```
const observer = new MutationObserver(function (mutationsList) {
  if (document.querySelector("input[data-automation-id]")) {
    init();
    observer.disconnect();
  }
});
```
登录后复制
在上面的代码中，document.querySelector("input[data-automation-id]") 用于检查页面上是否存在 data-automation-id 属性的 input 元素。如果存在，则调用 init() 函数执行初始化操作，并使用 observer.disconnect() 断开 MutationObserver 的连接，停止监听DOM树的变化。

AI封面生成器
专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情
配置 MutationObserver 并开始监听：

使用 observe() 方法配置 MutationObserver 并开始监听DOM树的变化。
```
observer.observe(document, { childList: true, subtree: true });
```
登录后复制
observe() 方法接收两个参数：
- 第一个参数是要监听的DOM节点，这里我们监听整个 document。
- 第二个参数是一个配置对象，用于指定要监听的变化类型。childList: true 表示监听子节点的添加或删除，subtree: true 表示监听整个子树的变化。

完整代码示例：

const observer = new MutationObserver(function (mutationsList) {
  if (document.querySelector("input[data-automation-id]")) {
    init();
    observer.disconnect();
  }
});

observer.observe(document, { childList: true, subtree: true });

function init() {
  // 在这里执行初始化操作
  console.log("Initialization complete!");
}

登录后复制

注意事项：

MutationObserver 是一种异步API，这意味着回调函数会在浏览器空闲时执行。
MutationObserver 只能保证在目标元素出现后执行初始化函数，但不能保证所有输入字段都可用。如果需要确保所有输入字段都可用，可能需要结合其他方法，例如使用 setTimeout() 函数进行延迟执行。
为了避免性能问题，建议在完成初始化操作后立即断开 MutationObserver 的连接。

总结：

使用 MutationObserver 监听页面上特定元素出现的状态是一种可靠的页面加载后执行代码的解决方案。它可以避免在页面未完全加载时因元素未找到而导致的错误，并提供了一种更灵活的控制页面加载顺序的方式。虽然 MutationObserver 并不能保证所有元素都加载完成，但它提供了一个比 window.onload 和 DOMContentLoaded 更精确的触发时机。

以上就是使用 MutationObserver 监听页面加载完成后的状态的详细内容，更多请关注php中文网其它相关文章！