如何检测用户何时离开网页？

Question

我想在用户通过关闭浏览器选项卡或按浏览器的后退按钮退出网页时触发一个功能。目前，我正在使用“beforeunload”和“unload”事件。但是当用户重新加载页面时，下载事件也会触发。有办法解决这个问题吗

if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {} else {
    window.addEventListener('beforeunload', function() {
        window.addEventListener('unload', function() {
            if (!isSubmit) {
                sendDownloadEmail();
            }
        });
    });

    window.addEventListener('unload', function() {
        if (!isSubmit) {
            sendDownloadEmail();
        }
    });
}

Answer 1

1. beforeunload 事件用于捕获选项卡关闭和后退按钮按下。
2. pageshow 事件用于区分重新加载和实际页面退出。
3. wasReloaded 标志可防止函数在重新加载时触发。 event.preventDefault() 和事件。
4. beforeunload 中的 returnValue 是可选的，用于显示确认对话框。

    let wasReloaded = false;
    
    window.addEventListener('beforeunload', function (event) {
        if (wasReloaded) {
            return; // Skip execution if the page was reloaded
        }
    
        // Indicate that the page is about to unload
        // (can be used for confirmation dialogs or other actions)
        event.preventDefault();
        event.returnValue = 'Are you sure you want to leave?';
    
        // Trigger the function on actual page exit (not reload)
        window.addEventListener('unload', function () {
            if (!isSubmit) {
                sendDownloadEmail();
            }
        });
    });
    
    window.addEventListener('pageshow', function (event) {
        if (event.persisted) {
            wasReloaded = true;
        }
    });