HTML中的iframe是什么？-html教程-PHP中文网

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

html中的iframe是什么？

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

它不是

 那种容器，不能靠 CSS 直接穿透修改子页面内容；也不是  那种静态资源，而是真正启动了一个新的、受限的浏览器环境。
为什么 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 自身就是内容，形成循环依赖。

											
												
												
													HTML设计工具专业版
													企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。
												
												下载
												
											
										

必须确保 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 更重要。