如何用Mutation Observer检测新结果窗口并关闭旧窗口？

现有代码的问题分析 #

1. 节点匹配范围太窄：你只检查了addedNodes数组里的节点自身ID，但结果窗口可能是作为某个父节点的子元素被添加到DOM中的，直接检查顶层新增节点会漏判。
2. 关闭逻辑不精准：document.querySelector('[title="closeButton"]')只会选中页面中第一个匹配的按钮，无法确保是旧窗口的关闭按钮，容易误操作。
3. 未处理多窗口场景：现有代码只要检测到新窗口就触发关闭，但没判断当前是否存在多个窗口，可能导致刚打开的窗口被误关。

修正后的实现代码 #

function autoCloseOldResultWindow() {
  // 匹配所有结果窗口的选择器（ID以指定前缀开头）
  const resultWindowSelector = '[id^="lefttabs_tablist_module_"]';

  const observer = new MutationObserver((mutations) => {
    // 遍历所有DOM变化
    mutations.forEach(mutation => {
      // 检查本次变化中是否新增了结果窗口（包括嵌套在父节点里的情况）
      const hasNewWindow = Array.from(mutation.addedNodes).some(node => {
        return node.matches?.(resultWindowSelector) || (node.querySelector?.(resultWindowSelector) !== null);
      });

      if (hasNewWindow) {
        // 获取当前所有已打开的结果窗口，按DOM中的出现顺序排序
        const allResultWindows = Array.from(document.querySelectorAll(resultWindowSelector));
        
        // 当存在至少两个窗口时，关闭最早打开的那个（数组第一个元素）
        if (allResultWindows.length >= 2) {
          const oldWindow = allResultWindows[0];
          const closeButton = oldWindow.querySelector('[title="closeButton"]');
          
          if (closeButton) {
            closeButton.click();
            console.log("旧结果窗口已自动关闭");
          }
        }
      }
    });
  });

  // 监听body下所有子树的节点新增/删除
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 启动自动关闭逻辑
autoCloseOldResultWindow();

关键改进点 #

• 更灵活的节点检测：用matches和querySelector结合，不管结果窗口是直接新增还是嵌套在父节点里新增，都能被检测到。
• 精准关闭旧窗口：先找到所有结果窗口，再定位到旧窗口的关闭按钮，避免误操作新窗口。
• 多窗口判断：只有当存在两个及以上窗口时才执行关闭，完全匹配你的需求场景。

内容的提问来源于stack exchange，提问作者Thalia