如何实现popstate事件的beforeunload等效确认功能？

核心逻辑：popstate 触发时历史记录已变更，所以要先回滚历史到跳转前状态，再弹出确认提示框，根据用户选择决定是否执行原跳转操作。

步骤与代码示例 #

1. 跟踪脏状态与历史索引
   用 isDirty 标记内容是否未保存，同时记录当前历史记录的索引，确保回滚操作准确：

   let isDirty = false;
   let currentHistoryIndex = history.length;
   
   // 示例：编辑器内容修改时标记为脏状态
   document.querySelector('#editor').addEventListener('input', () => {
     isDirty = true;
   });
   
   // 封装pushState，同步更新历史索引
   const customPushState = (state, title, url) => {
     history.pushState(state, title, url);
     currentHistoryIndex = history.length;
   };
   

2. 拦截popstate事件
   触发 popstate 时，若处于脏状态则先回滚历史，再弹出确认框：

   window.addEventListener('popstate', (e) => {
     if (!isDirty) {
       currentHistoryIndex = history.length;
       return;
     }
   
     // 计算跳转方向（回退为负，前进为正）
     const delta = history.length - currentHistoryIndex;
     // 回滚到跳转前状态
     history.go(-delta);
     currentHistoryIndex = history.length;
   
     // 确认提示
     if (confirm('你有未保存内容，确定要离开吗？')) {
       isDirty = false;
       history.go(delta); // 执行原跳转
     }
   });
   

3. 兼容页面卸载场景
   保留 beforeunload 处理关闭标签页、刷新页面等场景：

   window.addEventListener('beforeunload', (e) => {
     if (isDirty) {
       e.preventDefault();
       e.returnValue = '你有未保存的内容，确定要离开吗？';
     }
   });
   

关键注意点 #

• 每次调用 pushState/replaceState 都要更新 currentHistoryIndex，否则回滚逻辑会失效。
• 部分浏览器会限制高频弹出的确认框，避免滥用该逻辑。
• 用户取消跳转后，需确保页面状态（如编辑器内容）不受历史回滚操作影响。

内容的提问来源于stack exchange，提问作者kiv_apple