iframe src 必须是完整 URL，如 http://localhost:8000/embed.html 或 https://example.com/widget；相对路径在本地打开易 404，且受同源策略严格限制。
iframe src 属性必须是完整 URL，相对路径容易 404
浏览器对 iframe 的 src 做了严格同源和协议校验，填 "./page.html" 或 "page.html" 在本地双击打开时大概率空白，控制台报 Not allowed to load local resource。必须用 http://、https:// 或 file:// 开头（后者仅限调试且不推荐）。
- 开发阶段建议起一个本地服务：用
python3 -m http.server 8000，然后src="http://localhost:8000/embed.html" - 生产环境务必写全协议 + 域名，比如
src="https://example.com/widget"，别省略https:// - 如果嵌入的是同域页面，仍要确保路径可访问——检查目标 HTML 是否真能独立打开，而不是依赖父页 JS 渲染
iframe 宽高和滚动条行为由 CSS 控制，不是属性
width 和 height 属性虽能设，但响应式场景下很快失效；滚动条是否出现、是否隐藏，完全取决于 scrolling 属性（已废弃）或 CSS 的 overflow，而且只对 iframe 自身容器生效。
- 禁用滚动条：给
iframe加样式style="border: none; overflow: hidden;"，但注意这不会阻止内部页面自己滚动，只是隐藏外框滚动条 - 自适应高度：纯 HTML/CSS 无法自动撑开 iframe 高度，需 JS 配合
postMessage让子页通知父页自身高度 - 移动端适配：用
style="width: 100%; height: 400px; min-height: 400px;"比固定像素更稳妥，避免小屏溢出
跨域 iframe 无法读取内容，也发不出 postMessage 除非对方配合
想用 JS 获取 iframe.contentDocument 或调用子页函数？只要协议、域名、端口任一不同，就触发跨域限制，直接报 Blocked a frame from accessing a cross-origin frame。
- 唯一安全通信方式是
postMessage，但要求子页主动监听window.addEventListener('message', ...)并验证event.origin - 父页发消息前必须确认 iframe 已加载完成：
iframe.onload = () => iframe.contentWindow.postMessage(...) - 常见坑：子页没监听、父页过早发消息、没校验
event.origin导致 XSS 风险
iframe 加载失败时没有默认 fallback，得手动处理
网络超时、404、CSP 拦截都会让 iframe 显示为空白，但页面不会报错，用户也看不出问题。浏览器不提供 onerror 事件，只能靠定时检测或监听 load/error 的组合。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：加
onload和onerror属性，虽然onerror对跨域不触发，但对同域 404 有效 - 可靠方案：用
setTimeout延迟 5 秒检查iframe.contentDocument?.body?.children.length是否为 0，再提示“加载失败” - 别忘了加
title属性，提升无障碍体验：<iframe title="第三方天气插件"></iframe>
真正麻烦的从来不是写一行 iframe 标签，而是它背后那套静默失败、跨域隔离、尺寸失控的连锁反应——每处都得单独补漏，没法一劳永逸。
