iframe src必须为完整URL或相对路径，空值、javascript:void(0)、file://等非HTTP(S)地址会被浏览器拒绝；需设宽高样式，默认300×150像素；跨域下无法访问contentDocument，仅能通过postMessage通信；移动端需额外处理滚动与缩放。
iframe src 属性必须是完整 URL 或相对路径
浏览器对 iframe 的 src 有严格校验：空值、javascript:void(0)、本地 file:// 路径（非 HTTP(S) 协议）在多数现代浏览器中会直接拒绝加载，或触发跨域/安全策略报错。开发时常见错误是写成 src="index.html" 却忘了当前页面不在同一目录下，结果 iframe 显示空白且控制台报 net::ERR_FILE_NOT_FOUND 或 404。
实操建议：
- 本地测试务必起一个本地服务（如
python3 -m http.server 8000），用http://localhost:8000/page.html这类地址 - 生产环境优先用绝对路径，例如
src="/assets/embed/widget.html"，避免因父页面路径变化导致子页面加载失败 - 若需动态加载，确保赋值前已做非空和协议检查：
if (url.startsWith('http') || url.startsWith('/')) iframe.src = url;
iframe 默认无宽高，不设 style 就看不见
iframe 是替换型内联元素，默认尺寸为 300×150 像素——但很多开发者误以为它会自动撑满容器，结果嵌入后只看到一条细线或完全不可见。更隐蔽的问题是：父容器用了 display: flex 或 grid，而没给 iframe 设 width: 100%，导致它收缩到内容宽度（常为 0）。
实操建议：
- 至少显式设置
width和height，推荐用 CSS： - 响应式场景下，用
aspect-ratio配合width: 100%控制比例，避免拉伸变形 - 移除默认边框（
border: none）和滚动条（scrolling="no"已废弃，改用overflow: hidden在父容器上）
跨域 iframe 无法访问 contentDocument
如果 iframe 加载的是不同源（协议、域名、端口任一不同）的页面，JavaScript 尝试读取 iframe.contentDocument 或调用 iframe.contentWindow.postMessage 以外的操作，会立即抛出 DOMException: Blocked a frame from accessing a cross-origin frame。这不是 bug，是浏览器强制的安全限制。
实操建议：
- 同域调试时确认两页协议一致（都用
https://，不要混用http和https） - 跨域通信唯一合规方式是
postMessage+message事件监听，且必须校验event.origin，不能写死event.source - 不要依赖
iframe.onload判断子页面 JS 是否执行完毕——它只表示 HTML 加载完成，JS 可能还在执行；如需同步，由子页面主动postMessage通知
移动端 iframe 滚动卡顿与缩放失效
iOS Safari 对 iframe 的 touch 事件处理较特殊：默认禁用内部滚动（表现为“点不动”），且 viewport 元标签在 iframe 内无效，导致页面缩放、双指缩放被父页面接管或直接禁用。
实操建议：
- 加
scrolling="auto"（虽然已废弃，但 iOS 仍识别）并配合 CSS：iframe { -webkit-overflow-scrolling: touch; } - 确保父页面
中未设置user-scalable=no，否则 iframe 内也无法缩放 - 安卓 WebView 需检查是否启用了
setSupportZoom(true)，否则 iframe 内的 zoom 行为会被忽略
嵌套页面不是万能胶，每个 iframe 都自带隔离边界和渲染开销。真正要小心的，是那些没报错却静默失败的场景——比如跨域后 contentWindow 突然变 null，或者 iOS 上 touchstart 根本不触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
