动态网站中过时元素的终结者：巧用 MutationObserver

javascript

2024-03-27 00:50:15

使用 MutationObserver 识别并关闭过时元素：动态网站的解决方案

简介

在不断变化的网络世界中，保持网站的最新状态至关重要。当引入新元素时，管理过时的元素对于提升用户体验是至关重要的。本文将深入探讨使用 MutationObserver API 识别和关闭过时元素的技巧。

MutationObserver API

MutationObserver 是一种 JavaScript API，用于监控 DOM 中的更改。通过创建一个 MutationObserver 实例，可以指定回调函数，该函数将在 DOM 发生更改时触发。

识别新元素

要在动态网站中识别新元素，需要将 MutationObserver 附加到要监视的元素。例如，要监视文档的 body 元素中的新元素，可以使用以下代码：

const observer = new MutationObserver(function(mutations) {
  // 遍历 MutationRecord 数组，查找新元素
});

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

关闭过时元素

当检测到新元素时，回调函数会被触发。在回调函数中，可以检查新元素是否包含预期的标识符，表明它是一个过时的元素。如果找到，则可以执行关闭该元素的操作，例如触发关闭按钮的 click() 方法。

示例：关闭过时的窗口

考虑一个网站，其中新窗口在具有特定 ID 的元素中打开。为了关闭过时的窗口，可以使用 MutationObserver 监听新元素的出现：

const observer = new MutationObserver(function(mutations) {
  let newWindowFound = mutations.find(mutation => Array.from(mutation.addedNodes)
    .find(node => node.id && node.id.includes("lefttabs_tablist_module_")));

  if (newWindowFound) {
    // 关闭过时的窗口
  }
});

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