onpopstate能监听前进操作，但它不区分前进或后退，仅在历史栈激活项变化且该记录state非空时触发；前进是否生效取决于目标历史条目是否由pushState/replaceState写入有效state。
onpopstate 能不能监听前进操作
能，但不是“单独监听前进”，onpopstate 事件本身不区分前进或后退——它只在历史栈激活项变化且该记录带非空 state 时触发，无论用户点的是「后退」还是「前进」按钮。
常见误解是以为给 window.onpopstate 赋值就能自动捕获所有导航，其实它和 addEventListener('popstate', ...) 行为一致，只是写法老旧；现代项目应统一用 addEventListener，因为 IE11 及部分旧环境对 onpopstate 属性支持不稳定。
- 首次加载页面不会触发
popstate，哪怕 URL 带参数 - 直接修改
location.href或点击普通<a href="/x">不会触发，除非你提前用pushState或replaceState注入过状态 - 传
null或空对象{}给pushState，在 Safari 14–15、某些 Android WebView 中会被忽略，导致后续前进也不触发
如何让前进操作可靠触发 popstate
关键不是“监听前进”，而是确保目标历史记录项有可识别的 state。前进动作能否触发 popstate，完全取决于那个“将要被激活”的历史条目是否由 pushState 或 replaceState 创建，并附带了非空 state。
- 每次内部跳转（如点击“下一页”）必须调用
history.pushState({ page: 'list', offset: 20 }, '', '?offset=20')，不能只改 URL - 页面初始化时若
history.state === null，立刻补一次history.replaceState({ init: true }, '', location.href)，避免首屏后退/前进失效 - 不要依赖
document.referrer或performance.navigation.type判断方向——它们不反映前进动作，且已废弃或不可靠
怎么知道当前是前进还是后退
没有浏览器原生 API 直接告诉你方向，但可以用 history.length 做相对比较。注意它不是绝对索引，仅适合相邻两次变化间判断趋势：
立即学习“前端免费学习笔记（深入）”；
let historyIndex = history.length;
window.addEventListener('popstate', () => {
const newIndex = history.length;
if (newIndex < historyIndex) {
console.log('用户后退了');
} else if (newIndex > historyIndex) {
console.log('用户前进了');
}
historyIndex = newIndex;
});
-
history.length包含已销毁的历史条目（比如 iframe 加载过的页面），不同浏览器实现略有差异，不能用于精确计数 - 如果用户快速连点多次前进/后退，中间某次
popstate可能被节流或丢失，这个差值法仍比检查 URL 更稳定 - 别试图用
event.state里的时间戳或序列号反推方向——state 是你写的，不是浏览器生成的，无法保证单调递增
为什么前进时 popstate 没反应？常见漏点
最常被忽略的是：你没在「前进的目标页」上主动管理历史栈。前进操作激活的是历史栈中更早存入的那条记录，如果那条记录当初没带 state，现在就不可能触发事件。
- SPA 中从 A → B → C，用户在 C 点前进按钮——实际是激活 C 之后的某条记录（比如 C’），但如果 C’ 是外链跳入或服务端渲染生成的，它大概率没
state - Vue Router / React Router 默认启用
history.pushState，但如果你手动写了location.assign('/x')跳转，就断开了状态链 - 移动端 iOS Safari 在 App 切后台再切回前台时，可能延迟触发或漏掉一次
popstate，需加visibilitychange兜底检测
真正难的不是写监听器，而是让每一条你希望被“前进/后退”访问的历史记录，都带着有效 state 入栈——这要求所有导航出口（按钮、链接、API 回调）都走同一套状态写入逻辑。
