Chrome 118中beforeunload触发确认弹窗，如何保留页面卸载服务器同步？

核心问题 #

你的代码触发Chrome 118+页面卸载确认弹窗的直接原因有两个：

1. 在beforeunload事件处理函数中调用了event.preventDefault()，Chrome 118严格执行规范，只要在该事件中调用此方法或返回非undefined值，就会强制弹出确认提示。
2. exec函数返回了unloadEvent()的结果（即jQuery的jqXHR对象），这也会被浏览器判定为需要触发弹窗的信号。

同时，你用的异步$.post在页面卸载时很可能被浏览器中断，无法保证购物车数据成功同步到服务器。

修复步骤 #

1. 重构addUnloadEvent方法，移除弹窗触发逻辑

修改事件绑定逻辑，去掉event.preventDefault()，并避免在beforeunload事件中返回任何值，同时优先使用更可靠的非弹窗事件：

addUnloadEvent(unloadEvent) {
    let executed = false;
    const exec = function(event) {
        if (executed) return;
        executed = true;
        unloadEvent();
    };

    // 优先使用这两个事件，不会触发弹窗，且触发时机更早
    document.addEventListener('visibilitychange', function(event) {
        if (document.visibilityState === 'hidden') {
            exec(event);
        }
    }, { capture: true });
    window.addEventListener("pagehide", exec, { capture: true });

    // beforeunload仅作为兜底，不触发弹窗
    window.addEventListener("beforeunload", function(event) {
        exec(event);
        // 不要调用preventDefault，也不要返回任何值
    }, { capture: true });

    // 移除重复的onbeforeunload绑定
    // window.onbeforeunload = exec;

    // unload事件作为最后兜底，尽量少用
    window.addEventListener('unload', exec, { capture: true });
}

2. 改用可靠的卸载时数据同步方案

放弃$.ajax，改用专门为页面卸载场景设计的API，确保请求能成功发送：

方案A：使用navigator.sendBeacon（推荐）

这是浏览器原生支持的API，专门用于页面卸载时发送数据，不会阻塞页面，也不会触发弹窗。需要注意数据格式匹配后端接口：

syncBasketWithServer() {
    // 如果后端接收FormData格式
    const formData = new FormData();
    formData.append('Basket', JSON.stringify($app.Basket));
    navigator.sendBeacon('/order/syncBasket', formData);

    // 如果后端仅接收JSON格式，改用Blob
    // const blob = new Blob(
    //     [JSON.stringify({ Basket: $app.Basket })],
    //     { type: 'application/json' }
    // );
    // navigator.sendBeacon('/order/syncBasket', blob);
}

你之前尝试sendBeacon失败，大概率是数据格式不匹配后端期望，比如后端需要JSON但你直接传了对象，改成Blob格式即可解决。

方案B：使用带keepalive的fetch

如果sendBeacon无法满足需求（比如需要自定义请求头），可以用fetch的keepalive选项：

syncBasketWithServer() {
    fetch('/order/syncBasket', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 可添加其他自定义头（部分头受限制）
        },
        body: JSON.stringify({ Basket: $app.Basket }),
        keepalive: true // 关键：让请求在页面卸载后继续执行
    });
}

关键注意事项 #

• 绝对不要在卸载事件中使用同步Ajax（async: false），现代浏览器会限制这类操作，且会阻塞页面卸载流程。
• visibilitychange和pagehide事件的触发时机比beforeunload更早，更适合做数据同步，且不会触发任何弹窗。
• 确保后端接口能正确解析sendBeacon或fetch发送的数据格式，比如FormData或JSON。

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