跨浏览器（含Firefox）标签页关闭检测兼容方案咨询

Firefox在页面卸载阶段会主动取消未完成的异步请求，普通fetch因为没有强制保持连接的配置，会被浏览器中断，导致请求无法送达第三方站点。以下是两种可行的兼容方案：

方案1：给fetch添加keepalive选项 #

通过keepalive参数告诉浏览器，该请求需要在页面卸载后继续完成，不会被中断。代码示例：

function close_the_chat(){
  fetch(`https://example.com/closethething`, {
    method: 'GET', // 根据接口需求选择GET/POST
    keepalive: true // 关键配置，确保请求在页面关闭后仍能执行
  });
}
window.addEventListener('beforeunload', function(event) {
  close_the_chat();
});

方案2：使用navigator.sendBeacon() #

这是浏览器专门为页面卸载场景设计的API，兼容性更好，能保证请求被尽可能发送出去，且不会阻塞页面关闭流程。代码示例：

function close_the_chat(){
  // GET请求直接传URL
  navigator.sendBeacon('https://example.com/closethething');
  
  // 若需要发送POST数据，可使用FormData
  // const formData = new FormData();
  // formData.append('key', 'value');
  // navigator.sendBeacon('https://example.com/closethething', formData);
}
window.addEventListener('beforeunload', function(event) {
  close_the_chat();
});

注意事项 #

• 避免在beforeunload事件中执行同步耗时操作，会影响页面关闭的流畅性
• 确保第三方站点的接口支持对应的请求方法（GET/POST），使用sendBeacon发送POST数据时，需匹配后端的接收逻辑

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