不能直接用 innerHTML 替换 document.body，因为会销毁事件监听器、清空表单值与滚动位置、导致脚本不执行、焦点丢失、SEO 和历史记录异常；安全做法是仅替换主容器或使用 replaceChild + 手动同步 head。
直接用 innerHTML 替换 document.body 或整个 html 结构，会导致脚本失效、事件丢失、焦点混乱、历史记录断裂——这不是“换内容”，而是“撕掉旧页面再贴一张新纸”，浏览器不会帮你续上断掉的线。
为什么不能 document.body.innerHTML = htmlString
这行代码看似简单，但会触发一系列不可逆的 DOM 重置：
- 所有已绑定的事件监听器（
addEventListener）被彻底销毁，新节点无监听 - 动态插入的
<script></script>标签默认不执行（除非显式设置type="module"或手动eval，但极不安全） -
document.title、meta标签、base等头部信息不会自动更新，SEO 和路由可能出错 - 表单输入值、滚动位置、
contenteditable光标状态全部清空 - 若新 HTML 含重复
id，后续getElementById行为不可预测
真正安全的整页替换：用 replaceChild + document.open/close
想保留当前文档上下文（比如已加载的全局变量、已初始化的第三方 SDK），必须避免销毁 document 实例本身。可行路径只有两条：
- 用
document.replaceChild(newBody, document.body)替换body，再手动同步head中关键节点（title、link、meta）——需解析新 HTML 字符串并提取对应标签 - 调用
document.open()→document.write(htmlString)→document.close()，这会创建一个全新文档流，但会清空所有 JS 执行上下文（包括你刚定义的函数），仅适用于跳转式场景，不适合 SPA
注意：document.write() 在页面加载完成后调用，会隐式触发 document.open()，直接覆盖整个文档——这是最危险也最容易误用的操作。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更现实的选择：只换容器，不碰 document
绝大多数所谓“整页替换”需求，其实只需要替换某个主容器（如 div#app 或 main），而非真换页：
- 把新 HTML 解析为 DOM 节点（用
DOMParser），再用replaceChildren()或innerHTML更新容器，比直接刷body安全得多 - 新内容里的脚本仍不会自动执行，但你可以遍历
script标签，用eval()或import()手动加载（前提是来源可信） - 事件委托是必选项：在容器父级监听
click，用e.target.matches('.btn-submit')判断目标，避免每次替换后重绑 - 记得清理旧定时器、取消未完成的
fetch、释放IntersectionObserver实例，否则内存泄漏肉眼可见
容易被忽略的焦点与可访问性断点
哪怕只是替换了 main 区域的内容，屏幕阅读器和键盘用户也会立刻“失联”：
- 新内容第一个可聚焦元素（如
h1或button）必须手动.focus()，否则焦点停在body上，用户无法感知变化 - 要设置
aria-live="polite"的区域，或用aria-labelledby关联标题，让 NVDA/JAWS 主动播报“内容已更新” - 若原页面有
inert属性控制交互态，新内容里得重新设一遍，否则 tab 键可能跳进不该进的区域
整页替换不是 DOM 操作题，是上下文迁移题——你搬走的不只是 HTML 字符串，还有状态、焦点、时机、信任链。没处理好这些，用户看到的不是“新页面”，而是“卡住的旧页面”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
