使用MutationObserver监听9GAG页面#main元素未触发函数求修复

你的代码无报错但无法触发函数，核心原因是9GAG的滚动加载内容并非直接作为#main的直接子节点添加，而是插入到#main内部的深层嵌套容器中。当前配置仅监听#main的直接子节点变化，无法捕获深层节点的新增操作。

解决方案 #

修改MutationObserver的配置选项，添加subtree: true，让观察者监听目标元素的整个DOM子树（包括所有后代节点），同时增加节点存在判断提升代码稳健性：

function adbut() {
  console.log("hd");
}

const observerOptions = {
  childList: true,
  subtree: true // 关键：监听目标元素及其所有后代节点的变化
};

const mainid = document.querySelector("#main");
if (mainid) { // 确保目标节点存在再初始化观察者
  const observer = new MutationObserver(adbut);
  observer.observe(mainid, observerOptions);
}

关键说明 #

• subtree: true：开启后，观察者会监控#main下所有层级的节点变化，覆盖滚动加载时新增内容的插入场景。
• 节点存在判断：虽然你确认#main已存在，但添加if (mainid)可以避免页面结构临时变动时的潜在报错。

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