onpopstate 只能监听 window 对象，不能写在 body 上；必须在 DOM 加载后立即用 addEventListener 注册，首次加载需 replaceState 垫底 state。
onpopstate 不能写在 <body> 上，也**不该用它**——浏览器不支持 body.onpopstate 这种写法，监听必然失效。
为什么 body.onpopstate 根本不会触发
HTML 元素的 on* 内联事件处理器（如 onclick、onload）只对少数几个全局事件生效，popstate 不在其中。它只属于 window 对象，是 History API 的专属事件。
- 写
<body onpopstate="handler()">：语法合法但静默忽略，控制台无报错，函数永不执行 - 写
window.onpopstate = handler：IE11 及更老浏览器支持，但现代项目中已被弃用，且无法移除、易被覆盖 - 正确做法只有：
window.addEventListener('popstate', handler)，且必须在 DOM 加载后尽早注册
监听器挂载时机不对，等于没写
监听器必须在任何路由跳转前就位，否则第一次后退会直接跳走，不进回调。常见错误是把它塞在某个组件的 mounted 或 useEffect 里，而该组件可能还没初始化。
- SPA 入口文件（如
main.js或index.html脚本块）中，DOM 加载完成后立即注册：document.addEventListener('DOMContentLoaded', () => { window.addEventListener('popstate', ...); }) - 避免在 Vue/React 组件内注册后不清理：组件卸载时必须调用
removeEventListener，否则残留监听器可能响应已销毁组件的状态 - 不要等路由库就绪再挂：Vue Router / React Router v6+ 已接管
history，手动监听需在它们初始化前或确认兼容模式
监听到 popstate 后，如何同步 body 状态
popstate 不负责更新 DOM，它只通知“历史变了”。你要主动读 event.state 并驱动视图，包括 <body> 的 class、data 属性等。
立即学习“前端免费学习笔记（深入）”；
- 给
<body>动态加 class 表示当前路由：document.body.className = 'page-' + (event.state?.page || 'home') - 用
data-属性存状态字段：document.body.dataset.tabId = event.state?.tabId || '' - 如果用了框架（如 React），别直接操作
body；应把event.state同步进全局状态（如 Context 或 Zustand），再由组件渲染驱动body变化 - 注意首次加载：此时
event.state是null，需提前用history.replaceState({ page: 'home' }, '', location.href)垫底
容易被忽略的：移动端 WebView 和初始 state
微信、支付宝、飞书等内置 WebView 对 history.state === null 更敏感。漏掉初始化垫底，用户点一次返回就白屏或跳错页，且无法复现于桌面 Chrome。
- 必须在
DOMContentLoaded后立刻检查：if (history.state === null) history.replaceState({ init: true }, '', location.href) - 别用
pushState垫——会导致多出一个不可见历史项，用户点返回先回到空页，再点一次才到目标页 - 移动端 Safari 对空对象
{}的兼容性差，state 至少带一个有意义字段，如{ route: 'list' }
