HTML中的iframe指什么？

iframe加载空白或报错“blocked by CORS”是因跨域策略限制：不同源时父页JS无法访问子页DOM/JS，属浏览器安全机制；需用postMessage通信，且本地file://协议下所有iframe均被视作跨域，必须启用本地服务。

iframe 是 HTML 中用于嵌入另一个独立文档的标签，它创建一个隔离的浏览上下文，不是简单“塞进一段 HTML”，而是加载并运行一个完整页面（含自己的 DOM、JS、CSS、Cookie 等）。

它不是 <div> 那种容器，不能靠 CSS 直接穿透修改子页面内容；也不是 <img> 那种静态资源，而是真正启动了一个新的、受限的浏览器环境。

---

为什么 iframe 加载后空白或报错 “blocked by CORS”？

这是最常见也最容易误判的问题：你以为是代码写错了，其实是跨域策略在起作用。

• src 指向不同源（协议、域名、端口任一不同）时，父页面 JS 无法读取 iframe.contentDocument 或调用其 window 方法，会直接抛出 DOMException: Blocked a frame with origin ... from accessing a cross-origin frame
• 子页面自己可以正常渲染，但父页面 JS 操作失败 —— 这不是 bug，是浏览器强制安全机制
• 若需通信，必须双方配合使用 window.postMessage()，且子页面要监听 message 事件并校验 event.origin
• 本地开发时用 file:// 协议打开页面，所有 iframe 默认视为跨域，连同域 HTML 文件也会被拦 —— 必须起本地服务（如 python -m http.server）

---

iframe 的 width 和 height 设为 100% 为什么没效果？

因为百分比尺寸依赖父容器有明确高度，而多数父元素默认高度由内容撑开 —— iframe 自身就是内容，形成循环依赖。

立即学习“前端免费学习笔记（深入）”；

• 必须确保 iframe 的所有上级元素（包括 body、html）都设置了 height: 100%，且无 overflow: hidden 截断
• 更可靠的做法是用 CSS Flex 或 Grid 布局控制容器，例如给父 div 设 display: flex; flex-direction: column;，再让 iframe 设 flex: 1
• height: 100vh 可绕过层级限制，但要注意 vh 是视口高度，滚动时可能遮挡其他内容
• 不要依赖 frameborder="0"（已废弃），改用 CSS：border: none;

---

怎么判断 iframe 是否加载完成？

不能只靠 load 事件 —— 它只表示资源加载完毕，不保证子页面 JS 执行完或 DOM 就绪。

• 推荐监听 iframe 元素的 load 事件，但仅用于触发“可交互”提示或启用按钮，不要在此刻立即操作子页面 DOM
• 若需确保子页面 JS 初始化完成，应在子页面内主动发 postMessage("ready")，父页面监听并验证 event.source === iframe.contentWindow
• iframe.contentDocument?.readyState === "complete" 可作为辅助判断，但跨域时该属性不可读
• 避免轮询 iframe.contentWindow?.document?.body，既低效又不可靠

---

实际项目中，iframe 的麻烦往往不在语法，而在边界：跨域通信的权责划分、加载状态的不确定性、样式隔离带来的调试成本。尤其当多个团队共用同一 iframe 场景时，约定好 postMessage 协议和错误码比优化某行 CSS 更重要。