jQuery beforeunload事件未按预期工作，求窗口关闭清理用户方案

问题原因分析 #

现代浏览器（Chrome、Firefox等）对beforeunload事件的执行做了严格限制：

• 弹窗类操作（比如alert）会被直接屏蔽，所以你看不到弹窗提示；
• 同步的表单提交或AJAX请求可能因为页面卸载速度过快，被浏览器中断，导致数据无法发送；
• 强制刷新（Ctrl+F5）时浏览器的处理逻辑不同，偶尔能触发同步请求，但这是不可靠的。

解决方案：使用navigator.sendBeacon API #

navigator.sendBeacon是浏览器专门为页面卸载/关闭场景设计的API，它异步发送数据但能保证浏览器在后台完成请求，不会阻塞页面卸载，完美适配你的需求。

替换原有代码的示例：

$(window).on('beforeunload', function() {
    // 构造要发送的清理数据
    const formData = new FormData();
    formData.append('crMode', 'close');
    // 如果有其他需要提交的表单字段，继续append即可
    // formData.append('userId', $('#userId').val());

    // 发送清理请求到后端接口
    navigator.sendBeacon('/your-chat-cleanup-endpoint', formData);
});

关键说明 #

1. 移除alert：浏览器完全禁止beforeunload中的弹窗，这个代码可以直接删除；
2. 后端适配：确保你的后端接口支持POST请求，能解析FormData格式的数据（如果习惯用JSON，可以将数据转成Blob格式发送，不过FormData更直接）；
3. 兼容降级（可选）：如果需要兼容极老浏览器，可以用fetch配合keepalive选项替代：

$(window).on('beforeunload', function() {
    const formData = new FormData();
    formData.append('crMode', 'close');

    fetch('/your-chat-cleanup-endpoint', {
        method: 'POST',
        body: formData,
        keepalive: true
    });
});

解决你的具体问题点 #

• 问题1：alert被忽略是浏览器的安全限制，用sendBeacon后不会有这个问题；
• 问题2：普通关闭时数据不发送是因为同步表单提交被中断，sendBeacon会保证请求完成；
• 问题3：Ctrl+F5时的偶然成功是浏览器强制刷新时的特殊处理，sendBeacon在所有卸载场景（关闭、刷新、强制刷新）都能稳定触发。

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