iframe白屏主因是服务端响应头限制，如x-frame-options或content-security-policy禁止嵌入；其次为src协议缺失、sandbox未配置、css泄漏或移动端滚动限制；跨域通信须用postmessage且由子页主动上报就绪状态。
直接用 <iframe></iframe> 是唯一能真正加载并运行第三方页面的原生方式；其他方案（比如 fetch + innerHTML）只会得到无脚本、无 Cookie、路径失效的“HTML 快照”，不是那个页面。
为什么 iframe src 写对了却白屏？先查响应头
白屏几乎全是服务端主动拒绝导致的，和你的 HTML 写法无关。打开浏览器开发者工具 → 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' 的白名单。
本地开发时用 file:// 协议，Chrome / Edge 会直接拒载跨域 iframe —— 必须起本地服务（如 python3 -m http.server）再测。
生产环境 iframe 必须显式设置的属性
只写 <iframe src="https://example.com"></iframe> 在真实项目中大概率出问题：
-
src必须带完整协议（https://或http://），不能是相对路径或协议相对 URL -
width和height推荐设具体值（如width="100%" height="500"），百分比宽高在 Safari 和旧版 Android WebView 中行为不一致 -
sandbox属性必须加：最小安全集是sandbox="allow-scripts"；若需 JS 读取自身 DOM，才加allow-same-origin（加了等于放弃同源检查，风险自担） -
title必须加，否则屏幕阅读器无法识别内容用途，违反无障碍基本要求 -
style="border: none;"替代已废弃的frameborder，避免默认边框干扰布局
嵌进去了但点不动、滚不了？排查 CSS 泄漏和移动端限制
现象：iframe 渲染正常，按钮无响应、表单不提交、滚动卡死——问题通常不在 iframe 标签本身：
- 父页面全局 CSS 泄漏（如
* { box-sizing: border-box; }）会破坏子页面盒模型；解决：给 iframe 外层容器加overflow: hidden，iframe 自身加style="border: none;" - 移动端 Safari 完全忽略
scrolling属性（HTML5 已废弃）；如需禁用滚动，得靠 JS 监听touchmove并preventDefault() - 目标页若设置了
X-Frame-Options: DENY，前端无法绕过，只能联系对方改响应头
跨域 iframe 和父页面怎么通信？只认 postMessage
同域下可用 window.parent 直接调用，但跨域时唯一安全可行的方式只有 postMessage：
- 子页面发消息：
window.parent.postMessage({type: 'READY'}, 'https://parent-domain.com') - 父页面监听：
window.addEventListener('message', handler)，必须校验event.origin防伪造 - 别依赖
load事件判断跨域 iframe 是否就绪——它不可靠；子页面需主动发消息通知“已准备就绪” - 若需频繁通信，建议在子页面封装一个轻量
postMessage适配层，统一处理序列化、回调绑定与错误降级
复杂点在于：子页面是否加载完成、JS 是否执行完毕、是否已准备好接收消息——这些状态父页面完全不可见，必须由子页面主动上报。这个边界经常被忽略，结果就是“发了消息，但没人收”。
