display: none是最可靠隐藏iframe方案，可彻底移出渲染树、不占位、不可交互且未加载时不触发；hidden属性效果相同但ie不支持，需降级处理。
iframe设display: none是最可靠方案
iframe 本身没有“隐藏但不占位”的内置语义属性，display: none是唯一能同时满足「不可见、不占位、不可交互、不触发加载（若尚未加载）」的方式。它让 iframe 彻底退出渲染树：父容器高度塌缩、offsetHeight为 0、getBoundingClientRect()返回全零值、tab 键无法 focus、鼠标事件完全失效。
常见误操作包括：
- 用
visibility: hidden：iframe 仍在文档流中，scrolling属性仍生效，滚动条可能残留，且iframe.contentWindow仍可访问 - 用
opacity: 0：透明但点击穿透，clientHeight非零，嵌入页脚本照常运行 - 用
position: absolute; left: -9999px：视觉移出，但getClientRects()仍返回非空结果，可能干扰 IntersectionObserver 判断
hidden 属性可用，但要注意兼容性与副作用
hidden 是 HTML5 原生布尔属性，效果等同于 display: none，且向屏幕阅读器明确传达“此元素不应被感知”。写法简洁：<iframe src="page.html" hidden></iframe> 或 JS 中 iframe.hidden = true。
但必须注意：
- IE 完全不支持，如需兼容 IE8+，必须 fallback：
iframe.style.display = 'none' - 它优先级高于 CSS：
iframe[hidden] { display: block !important; }也无效 - 不能用于过渡动画 ——
transition: display无效，transition: hidden不存在 - 设了
hidden后，src仍可能被预加载（尤其在 Chromium 中若 DOM 位置靠前），真正阻止加载需配合loading="eager"或延迟注入src
想懒加载又隐藏？别只靠 loading="lazy"
loading="lazy" 本身不是隐藏手段，它只控制加载时机。即使设了 loading="lazy"，iframe 默认仍是可见且占位的 —— 除非你额外加 display: none 或 hidden。
更关键的是，这个属性有硬性限制：
- 仅 Chromium 79+（Chrome/Edge/Opera）和 Safari 16.4+ 支持；Firefox 完全忽略
- 必须显式声明
width和height（不能是auto或缺失），否则 Chrome 会降级为 eager 加载 - 若 iframe 写在
开头附近，HTML 解析器会提前预加载，懒加载失效 -
src为about:blank、javascript:void(0)或空字符串时，loading="lazy"被无视
所以，真要“先隐藏、后按需加载”，推荐组合方案：初始不设 src，用 placeholder 占位；进入视口时再赋值 src，并同步移除 display: none。
隐藏后 iframe 内容还在跑？这才是容易被忽略的点
display: none 或 hidden 只影响渲染和交互，**不暂停 iframe 内部的运行时**：
- 已加载的
<video></video>继续播放、音频照出 - 已执行的 JS 脚本继续轮询、发请求、触发定时器
- 第三方统计（如 GA、神策）仍会上报页面曝光或用户行为
- 如果 iframe 里有表单自动提交逻辑，也可能悄悄触发
若需彻底“冻结”，得主动干预：iframe.contentWindow?.stop()（部分浏览器支持）、清空 src、或直接 iframe.remove()。但要注意，remove() 后再插入 DOM 会重新加载 —— 这才是比“怎么藏”更值得花时间判断的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
