iframe白屏或跨域报错主因是file://协议触发同源限制，须用http-server等启本地服务；响应式尺寸应删width/height属性改用css控制；sandbox必须启用并最小权限配置；postmessage需监听load事件且严格校验origin。
iframe白屏或跨域报错，先确认协议和服务器环境
本地双击打开index.html时，浏览器用file://协议加载，任何src相对路径（如./dashboard.html）都会触发跨源限制，直接白屏或控制台报net::ERR_FAILED。这不是代码写错了，是协议不匹配。
- 开发阶段必须起本地服务：用
http-server、live-server或 VS Code 的 Live Server 插件，确保地址是http://localhost:xxx或https://开头 - 同域嵌入（比如
src="pages/chart.html"）可用相对路径；跨域嵌入（如src="https://maps.google.com"）需目标页明确返回Access-Control-Allow-Origin响应头，且不能依赖allow-same-origin - 别写
src=""或src="about:blank"再用 JS 赋值——Chrome 会提前触发无效加载，报net::ERR_UNKNOWN_URL_SCHEME
响应式尺寸别硬写width/height属性，用CSS控制
写width="100%" height="500"在移动端极易导致横向滚动或高度塌陷，尤其嵌入地图、视频等第三方内容时，父容器高度未定义会让height="100%"直接失效。
- 删掉
width和height这两个 HTML 属性，全交给 CSS：style="width: 100%; aspect-ratio: 16/9; max-height: 600px;" -
aspect-ratio比 JS 计算宽高比更稳定，但 Safari 15.4+ 才原生支持；老浏览器可用padding-top: 56.25%hack（需外层div包裹并设position: relative） - 避免
height="100%"，除非父容器有明确height或flex/grid布局撑开
sandbox不是可选开关，是默认必须启用的安全底线
不加sandbox，等于把脚本执行、弹窗、表单提交、DOM 访问权限全开放给嵌入页——哪怕只是自家子域名，也存在被 XSS 利用的风险。
- 最小权限起步：
sandbox="allow-scripts"，禁止自动播放音频、禁用document.write、隔离 localStorage -
allow-same-origin必须与allow-scripts共存，且仅对真正同源（协议+域名+端口完全一致）资源生效；给第三方页面加它，浏览器直接忽略，还暴露配置漏洞 - Chrome 95+ 对未声明
sandbox的跨域 iframe 会降级处理（如禁用document.write），但行为不统一，别赌宽容度
postMessage通信前必须等load事件，且校验origin
在iframe标签后立刻调用iframe.contentWindow.postMessage()，大概率失败——此时contentWindow还是null，不是异步延迟问题，是 DOM 根本没就绪。
- 监听
load事件再发消息：frame.addEventListener('load', () => frame.contentWindow.postMessage(...)) - 子页收消息时，必须严格校验
event.origin，不能只看event.data.type或用includes('example.com')模糊匹配 - 测试用
http://localhost:3000，生产环境必须写死完整域名（如https://child.yourdomain.com），严禁用*通配
iframe不是“要不要用”的问题，而是“怎么安全可控地用”。最常被跳过的其实是title属性——它既影响屏幕阅读器体验，也参与 SEO 收录，留空或写成title=""等于主动放弃这两项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
