不能。iframe是独立上下文，主页面js无法直接访问其内部dom，同源需等load事件后通过contentdocument操作，跨域则完全不可控，必须依赖postmessage通信或修改源页面代码。
iframe 里广告 div 能不能用 parent 页面 JS 控制？
不能。iframe 是独立上下文，主页面 JS 无法直接访问其内部 DOM，document.getElementById() 或 querySelector() 对 iframe 内的广告 div 返回 null。这是同源策略硬性限制——哪怕 iframe 和主站同域，也必须显式通过 iframe.contentDocument 获取，且仅在 iframe 加载完成、同源前提下才可用。
常见错误现象：写了 iframe.contentDocument.querySelector('.ad-banner') 却报错 Cannot read property 'querySelector' of null，本质是 iframe 还没加载完，或跨域被拦截。
- 同域 iframe 可行但需等
load事件：iframe.addEventListener('load', () => { /* 操作 contentDocument */ }) - 跨域 iframe 完全不可控，JS 无权读取其 DOM，更别说隐藏元素
- 别试图用
iframe.style.display = 'none'—— 这会整个隐藏 iframe，不是隐藏它里面的广告
iframe 广告容器隐藏的两种可行路径
真正能落地的只有两条路：一是改被嵌入页（即 iframe 源页面）的代码；二是用 CSS 在主页面层叠遮盖或裁剪。
-
改源页面（推荐，治本）：在 iframe 的 URL 后加参数，比如
https://ad.example.com/widget.html?hide_ad=true，然后在该页面 JS 里读new URLSearchParams(window.location.search).has('hide_ad')，命中后给广告div加hidden属性或设display: none -
CSS 裁剪（应急）：用外层
div包住 iframe，设overflow: hidden，再用负margin或transform移动 iframe 位置，让广告区域刚好被裁掉。例如：<div style="overflow: hidden; height: 400px;"> <iframe src="..." style="margin-top: -80px;"></iframe> </div>
缺点是依赖固定尺寸，响应式下易失效
为什么 display: none !important 在 iframe 外部无效？
因为 CSS 作用域不穿透 iframe 边界。你在主页面写 #my-iframe .ad-container { display: none !important; }，这条规则根本不会应用到 iframe 内部的样式计算中——它只对主页面自己的 DOM 生效。
有人试过用 iframe 的 style 属性强行注入 CSS，比如 iframe.setAttribute('style', '...')，但这只能控制 iframe 元素自身，不影响其内容。
- 全局样式污染风险：不要在主页面写
iframe * { display: none; }，这会破坏整个 iframe 渲染 - 第三方广告联盟（如 Google AdSense）的 iframe 几乎全是跨域，你连它的 class 名都看不到，更别说选中
- 浏览器扩展类屏蔽（如 uBlock Origin）靠的是网络层过滤或注入脚本到 iframe 上下文，普通网页 JS 做不到
localStorage + MutationObserver 能否用于 iframe 内广告？
不能直接生效。MutationObserver 只监听当前 document 的 DOM 变化，对 iframe 内部节点无感知；localStorage 也无法跨 iframe 共享（除非同源且显式通过 postMessage 同步）。
如果非要持久化“不再展示”，唯一可行链路是：主页面点击“关闭” → 通过 postMessage 发指令给同源 iframe → iframe 内 JS 接收后执行隐藏并存 localStorage。
- 主页面发消息：
iframe.contentWindow.postMessage({ action: 'hideAd', id: 'banner-1' }, 'https://ad.example.com') - iframe 内监听：
window.addEventListener('message', e => { if (e.origin === 'https://your-site.com') { /* 执行隐藏 */ } }) - 注意：跨域时
postMessage只能通信，不能操作对方 DOM，最终隐藏动作仍须 iframe 自己完成
最常被忽略的一点：你以为隐藏了广告 div，但它可能只是个占位符，真实广告由 JS 动态插入 iframe 或通过 XHR 加载图片/脚本。此时光删 DOM 节点没用，得在资源加载前拦截请求或覆盖广告初始化逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
