如何实现类似Jira网页的浏览器前进/后退/刷新确认拦截功能？

核心思路 #

要实现类似Jira的效果，核心是拦截浏览器的页面卸载、历史记录跳转两类事件，配合一个"内容是否已修改"的状态，仅当内容被编辑后才触发确认逻辑。

具体实现步骤 #

1. 标记内容修改状态 #

先定义变量追踪内容是否被编辑：

let isDirty = false;

// 监听输入框实时修改，标记状态
document.getElementById('edit-input').addEventListener('input', () => {
  isDirty = true;
});

// 若涉及多选、下拉等表单控件，用change事件覆盖更多场景
document.getElementById('edit-form').addEventListener('change', () => {
  isDirty = true;
});

2. 拦截刷新/页面关闭/外部跳转 #

利用浏览器的beforeunload事件，处理用户刷新页面、关闭标签页或跳转到其他网站的场景：

window.addEventListener('beforeunload', (e) => {
  if (isDirty) {
    // 触发浏览器自带的确认弹窗（现代浏览器不允许自定义文案）
    e.preventDefault();
    e.returnValue = ''; // 必须设置该值才能唤起确认框
    return '';
  }
});

注意：出于安全规范，Chrome、Firefox等现代浏览器都禁止自定义beforeunload的弹窗文案，会显示浏览器默认提示内容。

3. 拦截浏览器前进/后退 #

浏览器前进后退会触发popstate事件，需要先拦截默认跳转，再自定义确认逻辑：

// 先插入一条自定义历史状态，用于后续恢复
window.history.pushState({ isCustom: true }, document.title);

window.addEventListener('popstate', (e) => {
  if (isDirty) {
    // 先恢复历史状态，阻止页面自动跳转
    e.preventDefault();
    window.history.pushState({ isCustom: true }, document.title);
    
    // 弹出自定义确认框
    if (confirm('您有未保存的修改，确定要离开当前页面吗？')) {
      isDirty = false; // 确认后重置状态
      // 执行真实的前进/后退操作
      window.history.back();
    }
  }
});

这里的关键是：触发popstate时历史记录已发生变化，先通过pushState恢复状态避免页面自动跳转，再根据用户选择执行对应操作。

4. 保存后重置状态 #

当用户完成内容保存后，重置isDirty状态，避免后续操作误触发确认：

document.getElementById('save-btn').addEventListener('click', () => {
  // 执行你的保存逻辑（比如接口请求）
  isDirty = false;
});

注意事项 #

• 避免滥用：不要在无需确认的场景下开启该功能，否则会影响用户体验。
• 历史栈管理：使用pushState时注意不要生成过多无效历史记录，避免出现循环跳转问题。
• 兼容性：beforeunload和popstate事件在所有主流浏览器中都能正常工作，无需额外兼容处理。

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