如何检测用户离开网页并排除页面刷新场景？

你原来使用的performance.navigation.type已被标准废弃，现在需要用新的API来判断导航类型，同时页面卸载时的异步请求也需要用更可靠的方式处理，避免被浏览器中断。以下是具体的解决方案：

核心思路 #

• 排除页面刷新的场景，只在关闭标签页、前进/后退时触发目标函数
• 使用浏览器原生的navigator.sendBeacon保证卸载时请求能正常发送（普通请求在unload阶段可能被浏览器终止）
• 正确维护isSubmit状态，避免表单提交时误触发

代码实现 #

// 获取当前页面的导航类型，替代已废弃的performance.navigation
const navigationEntry = performance.getEntriesByType('navigation')[0];
const isPageReload = navigationEntry?.type === 'reload';

// 仅在非刷新场景下绑定事件
if (!isPageReload) {
  // beforeunload可选：用于给用户弹出离开提示（部分浏览器会自定义提示文案）
  window.addEventListener('beforeunload', (e) => {
    if (!isSubmit) {
      e.returnValue = '确认要离开当前页面吗？';
    }
  });

  // unload事件：执行目标操作
  window.addEventListener('unload', () => {
    if (!isSubmit) {
      // 用sendBeacon替代普通请求，确保页面卸载时请求能送达服务器
      navigator.sendBeacon('/your-api-path', JSON.stringify({
        // 这里传入需要发送的参数
      }));
      // 如果必须保留原sendDownloadEmail函数，需确保它是同步逻辑或用sendBeacon包装
      // sendDownloadEmail();
    }
  });
}

关键细节说明 #

• 导航类型判断：performance.getEntriesByType('navigation')[0].type的返回值包括：
  • reload：页面通过刷新进入
  • navigate：通过链接、URL输入进入
  • back_forward：通过浏览器前进/后退按钮进入
• navigator.sendBeacon是浏览器专为页面卸载场景设计的API，不会阻塞页面关闭流程，且能提升请求成功率
• 确保isSubmit变量在用户提交表单时被正确设为true，避免提交操作触发卸载逻辑

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