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，而非预期位置
为什么监控大屏里 iframe 一多就卡顿甚至白屏
iframe 会阻塞 window.onload，哪怕指向的是空页面，主页面也得等它连同所有子资源（JS/CSS/图片/字体）全部加载执行完才触发该事件。实测中，一个响应慢的 iframe 可让 document.readyState 卡在 interactive 状态长达 5 秒以上。
- 首屏必需的 iframe 才设
loading="eager"；非首屏一律用data-src+IntersectionObserver延迟加载 - 老浏览器（如 IE）不支持
loading属性，会被忽略，回退成 eager 行为——这点必须写进兼容性 checklist - 别指望靠“优化 iframe 内容”来提速，真正瓶颈是初始渲染阻塞，不是子页面本身快慢
- Electron 场景下更危险：所有 iframe 共享同一个 WebContents，任一崩溃或死循环，整个主窗口卡死
跨站 iframe 怎么查是否独占渲染进程
不是每个 iframe 都开新进程。Chrome 的 Site Isolation 策略只对跨站 iframe 强制分配独立渲染进程，同站 iframe 默认复用主页面进程。判断依据只有 location.origin（协议+域名+端口）是否完全相同。
-
https://a.example.com和https://b.example.com→ 同站（example.com），共享进程 -
https://a.example.com和https://google.com→ 跨站，强制独立进程 -
https://a.example.com和http://a.example.com→ 协议不同 → 跨站 → 独立进程 - 验证方式：打开 Chrome 任务管理器（
Shift + Esc），找带“辅助框架”（Auxiliary Frame）标识的条目，那就是跨站 iframe 的独立进程
postMessage 通信为什么总收不到或校验失败
只要子应用与主站协议、域名、端口任一不同，就触发跨域限制。iframe.contentDocument、iframe.contentWindow.document 直接抛 DOMException: Blocked a frame from accessing a cross-origin frame，没有降级路径。
- 主应用发消息前必须确认
iframe.contentWindow存在且非null（等iframe.onload触发后再发） - 子应用接收消息后，必须严格校验
event.origin，例如if (event.origin !== 'https://main.monitoring-system.com') return; - 不要用
document.domain解决跨域——该方式仅适用于同主域不同子域，且已被现代浏览器逐步弃用 - 移动端要注意：若 iframe 内用了
viewport元标签，它在嵌套环境下无效，缩放和布局常出问题
ad.qq.com、login.taobao.com、maps.google.com）至少新增 3 个独立渲染进程，每个含完整 JS 引擎、DOM 树、V8 实例。调试时务必以 location.origin 为单位去数，而不是数 HTML 里写了几个 <iframe></iframe>。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
