iframe加载空白或报错“blocked by CORS”是因跨域策略限制：不同源时父页JS无法访问子页DOM/JS，属浏览器安全机制；需用postMessage通信，且本地file://协议下所有iframe均被视作跨域，必须启用本地服务。
iframe 是 HTML 中用于嵌入另一个独立文档的标签，它创建一个隔离的浏览上下文，不是简单“塞进一段 HTML”，而是加载并运行一个完整页面（含自己的 DOM、JS、CSS、Cookie 等）。
它不是 <div> 那种容器，不能靠 CSS 直接穿透修改子页面内容；也不是 <code><img alt="HTML中的iframe是什么？" > 那种静态资源，而是真正启动了一个新的、受限的浏览器环境。
为什么 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 更重要。
