如何实现Chrome、Edge、Firefox静默执行beforeunload事件无确认弹窗

问题核心原因 #

你遇到的Firefox无响应问题，本质是Firefox严格遵循浏览器规范，在beforeunload事件触发时会主动终止所有未完成的异步XMLHttpRequest请求，你原代码中使用的是异步GET请求，直接被Firefox拦截取消，所以看起来函数没有执行。此外beforeunload阶段的alert、console.log本身就会被部分浏览器主动拦截，不能用来做执行判断。

同时要注意：只要不在beforeunload监听函数中调用event.preventDefault()，也不修改event.returnValue属性，就绝不会触发卸载确认弹窗。

兼容全浏览器的解决方案 #

优先使用W3C专为页面卸载上报设计的navigator.sendBeaconAPI，浏览器会在后台异步保证请求发送完成，不会阻塞页面卸载，也不会触发任何弹窗，你使用的Chrome 92+、Edge 92+、Firefox 90+均原生支持该API。

第一步：修正事件监听代码 #

不要对event对象做任何额外操作，避免触发确认弹窗：

window.addEventListener("beforeunload", function(event) {
    unloading_page_func();
}, false);

第二步：重写执行函数 #

function unloading_page_func(){
    // 原有移除监听、清除定时器逻辑保留
    window.removeEventListener("beforeunload", unloading_page_func, false);
    clearInterval(update_display_interval_id);

    // 优先使用sendBeacon发送请求
    if (navigator.sendBeacon) {
        navigator.sendBeacon('/unload_page');
    } else {
        // 极端兼容场景降级为同步XHR，仅作为兜底方案
        let xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {
                    // 不支持AJAX的场景直接返回，避免阻塞卸载
                    return;
                }
            }
        }
        // 设为同步请求，保证请求完成再卸载
        xmlHttp.open('GET', '/unload_page', false);
        try {
            xmlHttp.send();
        } catch (err) {
            // 捕获异常避免阻塞页面卸载
        }
    }
};

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