iframe src为空或非法时白屏且无提示，因浏览器严格校验src值，对空字符串、javascript:void(0)、file://等一律静默拒绝加载，仅报net::err_failed或不报错；本地开发须起http服务，生产环境需用绝对路径并校验协议。
iframe src 为空或非法时为什么白屏且无提示
浏览器对 src 值校验极严：空字符串、javascript:void(0)、file:// 路径，现代浏览器一律静默拒绝加载，控制台只报 net::ERR_FAILED 或干脆不报。这不是 bug，是安全策略强制拦截。
- 本地开发必须起 HTTP 服务（如
python3 -m http.server 8000），不能直接双击打开 HTML 文件 - 生产环境用绝对路径，比如
src="/dashboard/energy.html"，避免父页面路由变化导致子应用 404 - 动态赋值前加协议校验：
if (url && (url.startsWith('http') || url.startsWith('/'))) iframe.src = url; - 相对路径极易出错——当前 URL 是
/admin/room/101时，src="panel.html"会尝试加载/admin/room/panel.html，而非预期位置
白屏主因是目标页响应头禁止嵌入
90% 的白屏问题不是你写错了 iframe，而是目标页面服务端主动拒绝。打开开发者工具 → Network → 找到该 iframe 请求 → 查 Response Headers：
-
X-Frame-Options: DENY或SAMEORIGIN -
Content-Security-Policy: frame-ancestors 'none'或'self'
只要出现其中任意一条，浏览器就会静默丢弃渲染，不报错也不提示。YouTube、Bilibili 的 embed 地址能用，是因为它们的响应头里写了类似 frame-ancestors 'self' https://*.youtube.com' 的白名单。
前端无法绕过——你只能联系对方改响应头，或换用他们明确支持嵌入的 URL（如带 /embed/ 后缀的地址）。
iframe 加载中闪白底怎么压住
iframe 默认白色背景，在深色主题下加载瞬间会“闪白”。这不是 bug，是浏览器渲染机制决定的：内容未就绪前，iframe 容器先按默认背景色绘制。
- 给
iframe加样式：iframe { background-color: transparent; } - 加
allowtransparency="true"（兼容旧 IE，现代浏览器可省略） - 更稳妥的做法是遮罩层 +
onload控制显隐：<iframe onload="this.style.visibility='visible'" style="visibility:hidden"></iframe> - 不要依赖 CSS 动画过渡 opacity，
onload触发后应立即设opacity: 0或visibility: visible，否则仍可能漏出白帧
为什么 iframe 一多就卡顿甚至白屏
iframe 会阻塞 window.onload，哪怕指向的是空页面，主页面也得等它连同所有子资源（JS/CSS/图片/字体）全部加载执行完才触发该事件。实测中，一个响应慢的 iframe 可让 document.readyState 卡在 interactive 状态长达 5 秒以上。
- 首屏必需的 iframe 才设
loading="eager"；非首屏一律用data-src+IntersectionObserver延迟加载 - 老浏览器（如 IE）不支持
loading属性，会被忽略，回退成 eager 行为——这点必须写进兼容性 checklist - Electron 场景下更危险：所有 iframe 共享同一个
WebContents，任一崩溃或死循环，整个主窗口卡死 - 别指望靠“优化 iframe 内容”来提速，真正瓶颈是初始渲染阻塞，不是子页面本身快慢
location.origin（协议+域名+端口）是否完全相同。哪怕同域不同子域（https://a.example.com vs https://b.example.com）都算同站、复用进程；而协议不同（https://a.example.com vs http://a.example.com）就强制跨站、独占进程。验证方式：Chrome 任务管理器（Shift + Esc）里找带“辅助框架”标识的条目。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
