iframe显示空白主因是浏览器静默拦截或服务端拒绝：chrome 115+中display:none容器内iframe不加载；https页src用http触发mixed content拦截；file://协议下全失败；目标页返回x-frame-options: deny或csp frame-ancestors禁止嵌入时亦白屏。
iframe 显示空白，90% 不是 HTML 写错了，而是加载被浏览器静默拦截或服务端主动拒绝——直接看控制台和 Network 面板比反复改 src 更快。
Chrome 115+ 下 display: none 容器里 iframe 不加载
Chrome 115 起对隐藏容器中 iframe 的初始化行为更激进：如果父元素初始为 display: none，iframe 可能根本不会发起请求（Network 里看不到任何记录，Console 也无报错）。
- 别用
<div style="display:none"><iframe src="..."></iframe></div>预埋 iframe - 改用
visibility: hidden; opacity: 0或 HTML5hidden属性保留渲染上下文 - 确保
src在容器变为可见前已设好，而不是靠 JS 点击后才赋值 - 若必须延迟加载，用
loading="eager"强制立即加载（lazy是默认值，对隐藏元素无效）
HTTPS 页面里 src 用 http:// 导致 Mixed Content 拦截
主页面是 https://，但 src 写了 http://example.com/page.html，Chrome/Firefox/Edge 会直接屏蔽，控制台报 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure frame 'http://...'。
- 本地开发时，主页面是
http://localhost:8080，src也必须是http://开头（不能写https://或省略协议） - 上线后全部显式写
https://，哪怕同域也要写全，避免//example.com/page.html这种协议相对地址 - file:// 协议下所有 iframe 加载都会失败，必须起 HTTP 服务（如
python3 -m http.server）再测
目标页返回 X-Frame-Options 或 CSP frame-ancestors 头
iframe 白屏但控制台无报错？打开 Network → 找到该请求 → 查 Response Headers。只要出现以下任意一条，浏览器就丢弃内容：
-
X-Frame-Options: DENY或SAMEORIGIN（而你不在同域） -
Content-Security-Policy: frame-ancestors 'none'或'self'（而你域名不匹配）
这类响应头由目标服务器控制，你无法绕过。验证方式：把 src 地址直接粘贴到新标签页打开，确认它能正常渲染且无重定向、无登录跳转；再检查其响应头是否允许你的域名，例如：frame-ancestors 'self' https://yourdomain.com;。
iframe 渲染了但交互失效、滚动卡死、内容不全屏
看起来“显示了”，实则功能残缺：按钮点不动、无法滚动、上下左右留白、双滚动条——问题常出在样式和 sandbox 配置上。
- 父页面
body { margin: 0; padding: 0; }必须加，否则 iframe 周围有默认空白 - iframe 自身要设
style="border: none; width: 100%; height: 100%;"，避免 Safari 对百分比高度解析异常 - 必须加
sandbox="allow-scripts"，否则 JS 不执行；需要 DOM 访问才加allow-same-origin（加了等于放弃同源保护） - 移动端需额外加
<meta name="viewport" content="width=device-width">到子页面，否则可能缩放错乱
真正难排查的，往往是那些没报错、Network 里请求成功、Response 也返回了 HTML，但就是不渲染——这时候得盯紧 iframe 的父容器尺寸、CSS 层叠顺序、以及 Chrome 115 后对“可渲染上下文”的隐式要求。不是所有 visible 都等于 browser-ready。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
