使用JavaScript实现仅在用户按下后退按钮时触发网页离开警告

核心实现代码 #

// 标记是否为后退操作
let isBackNavigation = false;

// 页面加载时向历史栈插入当前页状态标记
window.addEventListener('load', () => {
  history.pushState({ page: 'current' }, '', location.href);
});

// 监听历史栈变更事件，仅后退/前进操作会触发
window.addEventListener('popstate', (event) => {
  // state为null说明回退到插入当前页标记之前的记录，判定为后退操作
  if (event.state === null) {
    const leaveConfirm = confirm('Are you sure you wish to leave?');
    if (leaveConfirm) {
      // 用户确认离开，执行后退
      history.go(-1);
    } else {
      // 用户取消，恢复历史栈标记，下次后退仍能触发监听
      history.pushState({ page: 'current' }, '', location.href);
    }
    isBackNavigation = true;
  } else {
    isBackNavigation = false;
  }
});

// 可选：兼容beforeunload拦截逻辑，非后退操作直接放行
window.onbeforeunload = (e) => {
  if (!isBackNavigation) return;
  e.preventDefault();
  e.returnValue = 'Are you sure you wish to leave?';
  return e.returnValue;
};

实现说明 #

• 利用popstate事件仅在用户操作前进/后退按钮、调用history.back()/history.go()等历史操作方法时触发的特性，区分普通页面跳转和后退操作
• 页面初始化时调用history.pushState插入自定义状态的原因：原生历史栈中当前页的state默认值为null，插入自定义状态后，用户触发后退时popstate返回的state就会变为null，以此作为后退操作的判定依据
• 如果不需要拦截刷新、关闭页面等场景，直接删除window.onbeforeunload相关逻辑即可，仅保留popstate里的确认提示，不会影响页面内跳转、点击外链、表单提交等其他离开场景

注意事项 #

• 受浏览器安全策略限制，部分浏览器会屏蔽自定义的beforeunload提示文本，仅展示浏览器默认的离开提示，该限制无法绕过
• 如果是Vue、React等使用history路由的单页应用，需要调整状态判断逻辑，避免和框架自带的历史栈操作冲突

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