frameset在html5中已被彻底移除，语法非法，浏览器直接忽略并退入怪异模式；必须用css grid/flexbox配合语义化标签或iframe替代，且iframe需配置title、sandbox和loading属性。
HTML 框架集（frameset）本身不是现代系统迁移的可行方案，它早已被 HTML5 废弃，Chrome 于 2021 年起彻底移除支持，Firefox 和 Safari 也早已不渲染 frameset。试图用它做“模块化平滑过渡”，只会卡在第一个浏览器兼容性检查上。
真正能落地的模块化过渡，靠的是运行时隔离 + 渐进式挂载，不是静态框架切分。
为什么 frameset 在迁移中完全不可用
-
frameset是 HTML4 时代的布局机制，依赖frame标签加载独立文档，每个frame有自己完整的 DOM、JS 上下文和同源策略限制 - 现代前端构建工具（Vite、Webpack）、SSR 框架（Next.js、Nuxt）和微前端方案（qiankun、Module Federation）根本不识别也不编译
frameset - 所有主流 CI/CD 流程在 lint 阶段就会报错：
error: 'frameset' is not allowed in HTML5 - 即便硬塞进页面，Chrome 控制台会直接输出：
Failed to execute 'postMessage' on 'Window': Invalid target origin——跨 frame 通信在现代安全策略下基本瘫痪
替代方案：用 iframe 实现可控模块化挂载
iframe 是唯一保留的、浏览器原生支持的运行时隔离机制，但它必须被主动管理，不能当 frameset 的低配复刻：
-
iframe必须显式设置sandbox属性（如sandbox="allow-scripts allow-same-origin"），否则连 JS 都执行不了 - 老系统页面需提前注入轻量桥接脚本，暴露
window.parent.postMessage接口，用于通知父容器“我已就绪”或“我要跳转” - 父应用不能靠
iframe.contentWindow直接读取 DOM——跨域时该属性为null；所有通信必须走postMessage+message事件监听 - 动态调整
iframe高度时，不要依赖scrollHeight（老系统可能禁用溢出），改用子页面主动发消息告知高度：parent.postMessage({ type: 'resize', height: 620 }, '*')
更推荐的模块化路径：微前端 + 容器路由劫持
如果你的“老旧系统”是完整可访问的 Web 应用（比如一个基于 jQuery 的后台），优先走微前端而非 iframe：
- 用
qiankun的registerMicroApps注册老系统为子应用，URL 匹配规则写成/legacy/** - 老系统需暴露
bootstrap/mount/unmount三个生命周期函数，哪怕只是简单包装$(document).ready() - 关键点：老系统 HTML 中所有资源路径（
script、link、图片）必须改为绝对路径或 public 目录相对路径，避免挂载后 404 - 若老系统用了
document.write或直接操作document.body，必须加一层沙箱 wrapper，否则会污染主应用 DOM
最容易被忽略的细节：CSS 和事件泄漏
- 老系统 CSS 若含全局选择器（如
body { margin: 0 }、button { background: red }），会直接覆盖新系统样式 —— 必须在挂载前用CSSStyleSheet.replaceSync('')清空其全部规则，或用 Shadow DOM 封装（但 IE 不支持） -
addEventListener('click', handler, true)这类捕获阶段监听器，若在老系统里注册且未销毁，卸载后仍会触发 —— 必须在unmount阶段显式removeEventListener，不能只靠移除 DOM - 所有定时器（
setInterval、setTimeout）必须存入变量并在卸载时clearInterval，否则内存泄漏无法回收
真正的平滑，不在“看起来没刷新”，而在“切换前后状态干净、通信可控、样式不窜、资源不残留”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
