javascript 如何检测用户何时离开网页?

14ifxucb  于 9个月前  发布在  Java
关注(0)|答案(2)|浏览(115)

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

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();
        }
    });
}

字符串

zfycwa2u

zfycwa2u1#

  1. beforeunload事件用于捕获选项卡关闭和后退按钮按下。
  2. pageshow事件用于区分重新加载和实际页退出。
  3. waspreaded标志防止函数在重新加载时触发。事件.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;
        }
    });

字符串

zpqajqem

zpqajqem2#

The best answer is here,也有一个不稳定的答案,你可以测试。

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
  }
})

字符串

相关问题