iframe必须设合法src（如about:blank），否则跨域错误或白屏；file://协议下同目录HTML仍跨域，须用HTTP服务；sandbox默认禁用所有权限，需显式声明；iOS Safari对iframe高度和滚动有限制，微信内建议弃用iframe。
iframe 标签必须带 src 属性，否则不渲染内容
浏览器遇到空 src 或 src="about:blank" 以外的非法值（比如 src=""、src="#"），会触发跨域错误或直接白屏，且控制台可能不报明显错误。很多开发者以为“先占位再 JS 注入”，但 iframe 初始化阶段就依赖 src 值做同源判定和资源加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终设一个合法初始地址，哪怕只是
src="about:blank" - 需要动态加载时，用 JS 修改
iframe.contentDocument或重写src（注意：改src会重新加载） - 避免用
src="javascript:void(0)"—— 现代浏览器已禁用该写法，会报Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless you are writing to a document opened with window.open()
iframe 内容跨域后无法读写 contentDocument 和 contentWindow
这是最常踩的坑：本地 HTML 直接双击打开，嵌入同目录下另一个 HTML，依然算跨域（file:// 协议无源概念，各文件互为不同源）。只有通过 HTTP(S) 服务访问，且协议、域名、端口完全一致，才能安全交互。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 开发阶段务必起本地服务（如
npx serve、python3 -m http.server），别双击打开 - 跨域场景下，用
window.postMessage()配合message事件通信，双方都需监听并校验event.origin - 不要尝试用
document.domain = "xxx.com"解决跨子域问题 —— 该 API 已被现代浏览器废弃（Chrome 85+、Firefox 79+ 不支持）
iframe 的 sandbox 属性默认禁用脚本和表单，不显式声明就啥也干不了
加了 sandbox 但没配权限，等于给 iframe 上了全锁：JS 不执行、表单不可提交、弹窗被拦截、top.location 跳转失效。很多人加了 sandbox 只为防 XSS，却忘了自己页面里还要调用 postMessage 或监听 load 事件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最小权限原则：只开必需项，例如
sandbox="allow-scripts allow-same-origin allow-post-message" -
allow-same-origin必须和src同源才生效；若src是 data URL 或 javascript URL，该 flag 无效 - 不加
sandbox时，iframe 默认继承父页面权限；加了就全部清零，没有“默认开启”项
移动端 iOS Safari 对 iframe 的 height 和 scrolling 有硬限制
iOS Safari 会忽略 iframe 的 height 样式（尤其当内容高度动态变化时），且强制隐藏滚动条、禁用内部滚动（除非显式设 scrolling="yes" 并配合 -webkit-overflow-scrolling: touch）。更麻烦的是：在微信内置浏览器里，iframe 高度甚至无法通过 JS 准确获取（contentDocument.body.scrollHeight 返回 0）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
iframe包裹外部 H5 页时，优先用height: 100vh+position: fixed布局，而非依赖 JS 测高 - 避免在 iOS 上依赖
iframe.onload后立刻读取内容尺寸 —— 改用MutationObserver监听 body 变化 - 微信内嵌场景，干脆放弃 iframe，改用
location.replace()跳转或 WebView 容器直出
真正难的不是怎么写 iframe 标签，而是搞清它在哪种组合下会静默失败 —— 协议、沙箱、移动端、通信时机，四个变量一叠加，错因就藏在你看不见的地方。
