iframe是什么？详解HTML嵌套框架作用

为什么 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 更重要。

好了，本文到此结束，带大家了解了《iframe是什么？详解HTML嵌套框架作用》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！