如何检测用户是否离开了网页？

Question

我想在用户通过关闭浏览器标签页或按下浏览器后退按钮退出网页时触发一个函数。目前我正在使用“beforeunload”和“unload”事件，但当用户重新加载页面时，download事件也会触发。有没有办法解决这个问题？

if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    // 当页面是通过刷新加载时，不执行任何操作
} else {
    window.addEventListener('beforeunload', function() {
        if (!isSubmit) {
            sendDownloadEmail();
        }
    });

    // 实际上，在'beforeunload'事件中执行函数即可，因为'unload'事件可能在页面卸载完成后无法保证函数的执行
    // 若确实需要在'unload'事件中也执行，可以保留以下代码
    window.addEventListener('unload', function() {
        if (!isSubmit) {
            sendDownloadEmail();
        }
    });
}

perreal · Answer

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

    let wasReloaded = false;

    window.addEventListener('beforeunload', function(event) {
        if (wasReloaded) {
            return; // 如果页面已重新加载，则跳过执行
        }

        // 表示页面即将卸载（可用于显示确认对话框或其他操作）
        event.preventDefault();
        event.returnValue = '您确定要离开吗？';

        // 在实际页面退出（而非重新加载）时触发函数
        window.addEventListener('unload', function() {
            if (!isSubmit) {
                sendDownloadEmail();
            }
        });
    });

    window.addEventListener('pageshow', function(event) {
        if (event.persisted) {
            wasReloaded = true;
        }
    });

ghostdog74 · Answer

最佳答案可以在这里找到，还有一个可以测试的权宜之计。

let before_unload_time;
window.addEventListener('beforeunload', () => {
  before_unload_time = new Date().getTime();
});
window.addEventListener('unload', () => {
  if (new Date().getTime() - before_unload_time >= 4) {
    localStorage.test = 'refresh:' + before_unload_time;
  } else {
    localStorage.test = 'close:' + before_unload_time;
  }
});