是的，display: none仅视觉隐藏iframe，不中断资源加载、脚本执行或媒体播放；应改用hidden属性、清空src或remove()彻底释放资源。
iframe设display: none后还在加载和播放？
是的，display: none对<iframe></iframe>只是视觉隐藏，不中断资源加载、脚本执行或媒体播放。常见现象包括：广告音频仍在后台播放、统计像素请求照发、CPU占用不降、甚至 iframe 内 JS 持续轮询。
实操建议：
- 不要依赖 display: none 来“关停”广告 iframe，它只解决“看不着”，不解决“跑不停”
- 真正停掉加载/执行，得用 iframe.remove() 或先设 src="" 再设 display: none
- 若需保留 DOM 结构（比如后续可能恢复），优先清空 src：el.src = ''，再移除所有子节点（避免残留 script）
- 对已加载完成的广告 iframe，display: none 后调用 el.contentWindow?.stop?.() 可尝试中止未完成请求（兼容性有限，仅作补充）
为什么给广告 iframe 加 class.hidden 仍没隐藏？
因为第三方广告代码常通过内联 style="display: block !important" 或 JS 动态重写样式强行覆盖你的 CSS 类。你写的 .hidden { display: none; } 权重不够，且被 !important 直接压制。
实操建议：
- 查看 DevTools 的 Styles 面板，确认最终生效的 display 值是否被广告 JS 覆盖
- 改用更高权重的选择器，例如：body .ad-banner, #ad-container iframe { display: none !important; }
- 更可靠的方式：用 iframe.setAttribute('hidden', '') —— HTML5 hidden 属性等效于 display: none，且原生支持，部分广告 SDK 尚未针对性绕过
- 若广告由外链 JS 注入（如 Google AdSense），需在注入后立即监听并干预，不能只靠初始 CSS
隐藏广告 iframe 时表单提交或可访问性出问题？
不会——<iframe></iframe> 本身不是表单控件，display: none 不影响父页面表单提交逻辑。但要注意两个隐性风险：
实操建议：
- 若广告 iframe 里嵌了 <input type="hidden"> 并被其 JS 动态注入到主文档（极少见但存在），这些字段仍会随 form 提交 → 检查提交前的 FormData 或序列化结果
- 屏幕阅读器默认跳过 display: none 的 iframe，但若 iframe 内容含 aria-live 或自动播放音频，部分旧版读屏仍可能播报 → 加 aria-hidden="true" 和 title="" 双保险
- 不要用 opacity: 0 或 visibility: hidden 替代，它们会让 iframe 继续占位、加载、触发 focus 事件，反而更危险
动态控制广告 iframe 显隐的性能坑
在滚动或 resize 回调里频繁切换 display: none/block，会触发浏览器强制同步布局（forced reflow），尤其当 iframe 内含复杂广告脚本时，极易卡顿。
实操建议：
- 避免在 scroll 中直接操作 style.display；改用 IntersectionObserver 懒加载 + 隐藏策略
- 如果必须响应滚动，用 el.classList.toggle('hidden', isOffscreen)，CSS 中定义 .hidden { display: none; }，让浏览器批量处理样式变更
- 对多个广告位，不要逐个 toggle，用 CSS 自带的继承或属性选择器统一控制（例如：[data-ad-slot] { display: none; }）
- 切记：transition: display 0.3s 完全无效，别试；要淡出效果，得用 opacity + pointer-events: none + display: none 在动画结束回调里执行
真正麻烦的从来不是“怎么写 display: none”，而是广告 SDK 主动对抗隐藏逻辑、iframe 生命周期不可控、以及隐藏后残留的副作用。优先删 src 或 remove 元素，比死磕 display 更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
