iframe 不支持 placeholder 属性，需用外层容器包裹占位元素与 iframe，通过 js 控制显隐；或用 css aspect-ratio 与渐变背景实现静态占位，但无法区分加载失败。
iframe 本身没有 placeholder 属性
很多人想给 iframe 加个“暂无内容”或“加载中”的灰色占位提示，但必须明确：iframe 标签不支持 placeholder 属性——这和 input 或 textarea 完全不同。浏览器根本不识别 iframe placeholder="..."，写了也无效。
真正能起作用的，是用其他 HTML 元素模拟占位效果，再配合 CSS 控制显隐逻辑。核心思路不是“给 iframe 加 placeholder”，而是“在 iframe 加载完成前，显示一个替代层”。
用外层容器 + loading 状态控制占位层
最可控的做法是包裹一层 div，内部放占位元素（如文字、骨架图、渐变色块）和 iframe，通过 JS 控制显隐：
- 初始时隐藏
iframe，显示占位层（比如<div class="placeholder">加载中…</div>） - 监听
iframe.onload（同域）或用loading="lazy"+IntersectionObserver触发加载（跨域也适用） - 加载成功后，移除占位层，显示
iframe；失败时可保留占位层并提示错误
注意：不要依赖 onerror 捕获 iframe 加载失败——跨域 iframe 的 onerror 大部分情况下静默失效，尤其在 Safari 和部分 Android WebView 中。
纯 CSS 占位方案（无 JS，适合静态场景）
如果 iframe 内容固定、尺寸已知，且不需要动态加载反馈，可用 CSS 渐变 + aspect-ratio 做视觉占位：
- 外层容器设
aspect-ratio: 16 / 9，背景用linear-gradient(#eee, #eee) -
iframe设position: absolute; width: 100%; height: 100%，覆盖其上 - 加载期间用户看到的是灰色比例框，加载完成后自然覆盖
这个方案不触发任何网络请求，也不依赖 JS，但缺点是无法区分“未开始加载”和“加载失败”。若需错误反馈，仍要加 JS 监听。
sandbox 和 loading 属性影响占位行为
sandbox 和 loading 不直接提供占位能力，但会间接决定你能否可靠地感知加载状态：
-
loading="lazy"可延迟加载，但会使onload触发时机不可控，建议搭配IntersectionObserver使用 - 加了
sandbox（尤其是空值或不含allow-scripts）的 iframe，可能连基础脚本都禁用，导致内嵌页面无法主动通知父页“我加载完了” - 跨域 iframe 若没配
allow-same-origin，父页完全无法读取其contentDocument，scrollHeight或 DOM 就绪判断全部失效
所以，占位逻辑是否健壮，往往卡在 sandbox 权限和跨域策略上，而不是 CSS 写得够不够漂亮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
