AJAX 和用戶離開頁面

Question

我正在聊天，我試圖弄清楚如何檢測到用戶是否離開了頁面。 幾乎所有事情都由數據庫處理，以避免前端混亂。

所以我想做的是一旦頁面因任何原因離開（窗口關閉、轉到另一個頁面、單擊鏈接等），ajax 調用將在一個人離開之前被觸發，以便我可以更新數據庫。

這是我嘗試過的：

$(window).unload(function(){
      $.post("script.php",{key_leave:"289583002"});
});

出於某種奇怪的原因，它不起作用，我檢查了 php 代碼，它工作正常。 有什么建議么？

Answer 1

嘗試這個：

$(window).unload(function(){
    $.ajax({
        type: 'POST',
        url: 'script.php',
        async:false,
        data: {key_leave:"289583002"}
    });
});

請注意async:false ，瀏覽器會等待請求完成。

使用$.post是異步的，因此在瀏覽器停止執行腳本之前，請求可能不夠快。

Answer 2

這不是正確的方法...假設操作系統只是掛起或在瀏覽器進程中發生了某些事情，那么此事件將不會被觸發。 而且，您永遠不會知道用戶何時離開，在他/她斷開連接之后顯示他/她的在線狀態。 而不是這個，你可以做的是。

1. 嘗試連接套接字，以便在斷開套接字時可以知道用戶已斷開連接
2. 您可以向服務器發送請求（例如每1秒后發送一次），以便您可以知道用戶仍處於連接狀態。 如果您沒有收到請求 - 即使在2秒后 - 斷開用戶連接。

Answer 3

嘗試在$ .post之后添加彈出窗口（提示（“離開這么早？”））。 它可能會奏效。 這可能是糟糕的用戶體驗。 :)

Answer 4

不建議使用unload事件來檢測用戶離開頁面。 來自MDN ：

開發人員應避免使用 unload 事件……尤其是在移動設備上，unload 事件不會被可靠地觸發。

相反，請使用document上的visibilitychange事件和/或window上的pagehide事件（有關詳細信息，請參閱鏈接）。 例如：

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        $.ajax({
            type: 'POST',
            url: 'script.php',
            async:false,
            data: {key_leave: "289583002"}
        });
    }
});

更好的是，使用Navigator.sendBeacon ，它是專門為向服務器發送少量分析數據而設計的：

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
         navigator.sendBeacon('script.php', {key_leave: "289583002"});
    }
});

Answer 5

這與上面的答案有關。 https://stackoverflow.com/a/10272651/1306144

這將每1秒執行一次ajax調用。 （1000）

function callEveryOneSec() {
    $jx.ajax({}); // your ajax call
}

setInterval(callEveryOneSec, 1000);