NextJs/ReactJs如何监听关闭标签页/窗口并调用API

核心原理与限制 #

浏览器为了避免恶意网站阻塞页面关闭流程，会限制beforeunload事件中的普通异步操作，fetch或axios这类请求大概率会被直接取消。必须使用**navigator.sendBeacon()**——这是浏览器专门设计用于页面卸载场景的可靠请求API，不会阻塞页面关闭。

React组件通用实现 #

在函数组件中通过useEffect注册/销毁监听事件：

import { useEffect } from 'react';

const PageComponent = () => {
  useEffect(() => {
    const handlePageUnload = (e) => {
      // 替换为你的实际API地址
      const apiUrl = '/api/user-session-end';
      // 构造要发送的业务数据
      const payload = JSON.stringify({
        userId: 'user_12345',
        sessionId: 'sess_67890',
        action: 'page_close'
      });
      // 转成Blob格式确保兼容性
      const dataBlob = new Blob([payload], { type: 'application/json' });
      
      // 发送卸载请求
      navigator.sendBeacon(apiUrl, dataBlob);

      // 若不需要弹出关闭确认框，可省略下面两行
      // e.returnValue = '';
      // return e.returnValue;
    };

    window.addEventListener('beforeunload', handlePageUnload);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handlePageUnload);
    };
  }, []); // 空依赖确保仅注册一次监听

  return <div>你的页面内容</div>;
};

export default PageComponent;

Next.js 专属注意事项 #

• App Router 场景：必须将组件标记为客户端组件，因为window和navigator是浏览器专属API，服务端渲染时无法访问。只需在组件顶部添加：

'use client';

• Pages Router 场景：直接在页面组件或_app.js中使用上述代码即可，Pages Router 默认支持客户端环境的API调用。

常见失效原因排查 #

• 使用了普通异步请求：fetch/axios在页面卸载时会被浏览器终止，只有sendBeacon会被优先处理。
• 监听注册时机错误：在服务端渲染阶段尝试访问window导致报错，必须确保监听逻辑仅在客户端执行。
• API 不兼容POST请求：sendBeacon默认使用POST方法，若你的接口仅支持GET，可将数据封装为FormData传递。

补充：带关闭确认提示的场景 #

如果需要在用户关闭时弹出确认框（比如有未保存内容），可修改监听函数：

const handlePageUnload = (e) => {
  // 先执行API请求
  const dataBlob = new Blob([JSON.stringify({ userId: 'user_12345' })], { type: 'application/json' });
  navigator.sendBeacon('/api/unload-log', dataBlob);

  // 触发浏览器默认关闭确认提示（不同浏览器文案会统一替换）
  e.returnValue = '';
  return e.returnValue;
};

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