iframe是HTML5中唯一能原生加载并渲染外部页面的方案，它通过src或srcdoc属性嵌入内容，具备样式脚本隔离、沙箱控制和良好兼容性；div无法直接加载页面，用fetch+innerHTML会导致脚本失效、路径错乱和CORS问题。
用 iframe 是最直接的方案
HTML5 里没有“在 div 中打开页面”这个原生能力——div 是容器，不是加载器。真正能加载外部页面内容的，只有 iframe。它能嵌入另一个 HTML 文档，并渲染在当前页面的指定区域里。
常见错误是试图用 div + fetch 或 innerHTML 直接塞进完整 HTML 页面：这会丢失脚本执行、样式隔离失效、相对路径错乱，还可能触发 CORS 或被浏览器阻止执行内联脚本。
-
iframe自带沙箱机制，天然隔离样式和脚本，行为可预期 - 支持
src、srcdoc、sandbox等关键属性，控制粒度够细 - 移动端兼容性好，所有现代浏览器（包括 iOS Safari）都支持
iframe 的 src 和 srcdoc 怎么选
两个入口方式，适用场景完全不同：
- 用
src：加载同域或已配置 CORS 的远程页面，比如<iframe src="https://example.com/page.html"></iframe>；适合真实跳转需求，但受跨域限制，父页无法读取其 DOM - 用
srcdoc：把 HTML 字符串直接写进属性里，比如<iframe srcdoc="<h1>Hello</h1>"></iframe>；适合轻量内嵌、服务端渲染片段，不发请求，但不能加载外部资源（如<img src="..." alt="html5如何在div中打开一个页面" >会失败，除非是 data URL）
注意：srcdoc 必须配合 src="about:blank"（或留空）使用，否则部分浏览器会忽略它；Chrome 会优先加载 src，覆盖 srcdoc。
立即学习“前端免费学习笔记（深入）”；
跨域时 iframe 能做什么、不能做什么
只要目标页面和父页不同源，就触发跨域限制。这时候你能做的非常有限：
- 可以显示页面内容（浏览器允许渲染）
- 可以设置
iframe尺寸、滚动条、边框等外观属性 - 不能用 JS 读取
iframe.contentDocument或调用其内部函数 - 不能监听其
load事件里的详细状态（只能知道“加载完了”，不知道是否成功或报错） - 如果对方页面设置了
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，iframe会直接空白，控制台报Refused to display ... in a frame
没有后端配合的话，别指望绕过这些限制。前端 JS 对跨域 iframe 基本就是“只看不碰”。
替代方案：什么时候该放弃 iframe？
如果你发现要频繁通信、共享状态、统一路由或 SEO 友好，iframe 就不是正解。这时候该考虑：
- 前端路由（如 React Router / Vue Router）做单页应用内跳转，内容由 JS 动态渲染到
div中 - 后端模板拼接（如 SSR），把目标页面内容作为 HTML 片段返回，再用
innerHTML注入——前提是内容可信、无脚本、无相对路径依赖 - 微前端架构（如 qiankun），用更重的沙箱机制协调多个独立应用，但复杂度陡增
真正容易被忽略的是：很多开发者硬套 iframe 是因为“想复用现成页面”，但没评估过它带来的点击劫持风险、SEO 影响、打印/缩放异常、键盘焦点断裂等问题。一旦上线后用户反馈“点不动”“打不开开发者工具”“打印出来是白纸”，基本就是这些坑爆了。
