真正生效必须用javascript记录状态并前置拦截：通过localstorage持久存储已屏蔽广告id，在广告渲染前读取列表跳过插入；对动态广告用mutationobserver二次拦截，iframe广告则隐藏外层容器。
点击后自动隐藏广告，不能只靠 display: none 临时隐藏——关掉标签页再打开，广告照旧出现。真正生效必须配合 JavaScript 记录状态，并在广告渲染前就拦截。
用 localStorage 持久记录已屏蔽的广告 ID
用户点“关闭”不是要删 DOM，而是告诉浏览器“下次别加载这个”。关键在广告容器渲染前读取屏蔽列表，提前跳过插入逻辑。
- 给广告容器加唯一标识，比如
<div data-ad-id="banner-2026-q3"> <li>点击关闭时存进 <code>localStorage：localStorage.setItem('ad_blocked_list', JSON.stringify(['banner-2026-q3'])) - 广告初始化函数开头加判断：
if (JSON.parse(localStorage.getItem('ad_blocked_list') || '[]').includes(adId)) return; - 注意：
localStorage是同源的，跨子域名或 iframe 广告无法共享 - 把监听挂到稳定节点上，比如
document.body或广告父容器 - 用
event.target.closest('[data-ad-id]')向上找广告容器，再取其dataset.adId - 避免重复绑定：全局只设一次
addEventListener，不要在每次广告加载时重绑 - 示例：
document.body.addEventListener('click', e => { const btn = e.target.closest('[data-ad-close]'); if (btn) { /* 找到对应广告容器并屏蔽 */ } }); - 不能试图操作 iframe 内容，违反同源策略，且现代浏览器会报错
- 可行替代方案：在 iframe 外层套一层
<div data-ad-id="taboola-1"><iframe src="..."></iframe></div>，关掉时隐藏整个外层容器 - 如果广告 SDK 提供了关闭回调（如某些信息流广告的
onClose钩子），优先用它触发本地存储写入 - 对纯第三方 iframe，
display: none+localStorage是唯一现实路径 - 用
MutationObserver监听body或广告区域的子节点变化 - 观察新增节点是否含
data-ad-id，若有且已在屏蔽列表中，立刻node.remove()或加ad-hiddenclass - 注意性能：过滤条件要精确，避免频繁触发；观察器需在页面生命周期早期启动
- 示例片段：
new MutationObserver(mutations => { mutations.forEach(m => m.addedNodes.forEach(n => { if (n.nodeType === 1 && n.dataset.adId && isBlocked(n.dataset.adId)) n.classList.add('ad-hidden'); })) }).observe(document.body, { childList: true, subtree: true });
绑定事件必须用事件委托，不能依赖动态 ID
广告 JS 经常动态生成按钮，ID 带时间戳或随机数（如 ad-close-btn-7f3a），直接 document.getElementById() 会失效。
iframe 广告无法被主站 JS 控制，得换思路
第三方广告联盟（如 Google AdSense、腾讯广点通）基本都用 iframe 隔离，主页面 JS 拿不到其内部 DOM，document.getElementById() 返回 null 是正常现象。
别漏掉 MutationObserver —— 动态插入的广告要二次拦截
有些广告是懒加载、首屏后异步注入，或者由第三方脚本通过 document.write 或 appendChild 插入，等不到你初始化完就出现了。
最容易被忽略的是：广告 JS 可能反复重绘容器（比如轮播 banner），导致你刚加的 ad-hidden 被样式重置或 DOM 替换掉。所以拦截点必须前置——不是“点了再藏”，而是“还没出来就决定不放”。
