如何检测Chrome浏览器关闭事件 实现AJAX更新操作兼容Chrome

问题原因 #

Chrome为了提升页面卸载速度和用户体验，默认会取消beforeunload事件触发时未完成的异步AJAX请求，Firefox目前对这类请求的放行策略更宽松，所以才会出现跨浏览器表现不一致的问题。

解决方案 #

替换普通jQuery异步AJAX为浏览器专门为卸载场景设计的navigator.sendBeacon() API，这个API会让浏览器在后台异步完成请求，不受页面卸载的上下文销毁影响，兼容性覆盖所有现代浏览器，包括Chrome、Edge、Firefox、Safari等。

修改后的前端代码 #

把原来的beforeunload事件逻辑替换为以下内容：

//Detect Browser or Tab Close Events
$(window).on('beforeunload',function(e) {
  e = e || window.event;
  var localStorageTime = localStorage.getItem('storagetime')
  if(localStorageTime!=null && localStorageTime!=undefined){
    var currentTime = new Date().getTime(),
        timeDifference = currentTime - localStorageTime;
    // 构造FormData保证后端可以正常接收POST参数
    const formData = new FormData();
    // 如果需要传额外参数可以在这里加，比如 formData.append('user_id', '<?php echo $_SESSION["id_user"]; ?>');

    if(timeDifference<25){//Browser Closed
       localStorage.removeItem('storagetime');
       // 替换原$.ajax为sendBeacon
       navigator.sendBeacon('logout.php', formData);
    }else{//Browser Tab Closed
       localStorage.setItem('storagetime',new Date().getTime());
       navigator.sendBeacon('logout.php', formData);
    }

  }else{
    localStorage.setItem('storagetime',new Date().getTime());
  }
});

额外注意事项 #

• 不要使用同步AJAX来实现这个需求：目前Chrome已逐步废弃beforeunload/unload事件中的同步XHR请求，不仅会抛出警告，还有概率被直接拦截，严重影响用户体验。
• navigator.sendBeacon最大支持传输64KB的数据，完全满足普通登出、状态更新类接口的需求。
• 如果你的logout.php需要校验会话，不需要额外处理，sendBeacon会自动携带当前域名下的Cookie信息，和普通AJAX请求一致。

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