iframe未被废弃，但用作同源页面布局是错误的；它仅适用于嵌入跨域第三方内容，同源模块化应采用CSS Grid、动态加载或Web Components等现代方案。
iframe 本身没被废弃，但用它当布局工具就是错的
HTML5 没废弃 iframe，它仍是合法、受支持的标签；真正被彻底废弃的是 frameset 和 frame。很多人误以为“iframe 是 frameset 的替代品”，结果把 iframe 当成页面主框架来用——这会导致滚动冲突、SEO 彻底失效、移动端双层滚动卡顿、焦点流转断裂，而且 document.write、Vue.mount()、React.render() 全部静默失败。
关键判断：只要你的 iframe src 指向的是自己项目里的另一个 HTML 文件（比如 nav.html、main.html），那你就是在重复 frameset 的错误路径，不是“过渡方案”，而是技术倒退。
什么时候必须用 iframe，什么时候该立刻停手
iframe 唯一正当用途是嵌入第三方、跨域、需沙箱隔离的内容：支付弹窗、客服 widget、地图服务、YouTube 视频、广告位。它的价值在于独立浏览上下文，不是为了切页面区域。
- 必须用：
src是https://maps.google.com、https://checkout.stripe.com这类明确跨域且你无法控制其 DOM 的地址 - 该停手：
src是"./sidebar.html"、"../dashboard/main.html"或任何同源静态文件——这种场景下，iframe只会制造障碍，不是解法 - 特别注意：
loading="lazy"对隐藏或跨域iframe无效；scrolling="no"在 Chrome 120+ 已被忽略，必须用 CSSoverflow: hidden
CSS Grid + 动态加载才是同源模块化的正解
想把原来分散在多个 frame 文件里的内容整合进一个页面？别拼 iframe，用语义化标签 + display: grid + JavaScript 加载逻辑。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 结构上用
<header>、<nav>、<main>、<aside>等语义标签，而非空div - 布局用
grid-template-areas显式声明区域，例如"header header" "nav main" "footer footer"，对应元素的grid-area值必须严格一致 - 内容加载用
fetch()+element.innerHTML，但务必过滤 script 标签或使用DOMPurify.sanitize()防 XSS - 侧边栏宽度别写
auto，设为240px或minmax(240px, 25%)；主内容区用1fr，并加width: 100%防文本溢出
Web Components 和微前端才是长期可维护的替代方向
如果模块间需要强隔离（样式不泄漏、JS 不污染）、可独立部署、支持版本共存，iframe 看似简单，实则让通信、状态同步、错误边界、资源加载全都变复杂。这时候该考虑更现代的抽象层。
- 轻量级隔离：用
customElements.define()注册自定义元素，this.attachShadow({ mode: 'closed' })创建影子 DOM - 数据传递：通过属性（
observedAttributes）和事件（this.dispatchEvent()）通信，避免直接操作 shadowRoot 内部 - 动态加载：用
import('./my-widget.js')按需加载组件代码，比 iframe 更细粒度、无额外文档开销 - 真跨团队协作：微前端方案如 Module Federation 或 single-spa，能解决路由同步、共享依赖、生命周期管理等 iframe 根本不处理的问题
真正难的从来不是怎么把内容塞进一个框里，而是怎么让多个逻辑单元在同一个 DOM 树里共存而不互相撕咬——这需要设计契约，不是靠浏览器自动创建新 window 对象就能糊弄过去。
