JavaScript在離開頁面之前執行的動作onforeforeunload正在執行

Question

我編寫了一些代碼我試圖用來粘貼訪問者的IP，以及它們在網站上的時間。 代碼：

<script> 
var startTime = new Date(); 
window.onbeforeunload = $(function() { 
    /* var ip = (window.location != window.parent.location) ? document.referrer: document.location; */ 
    /* var ip = "192.168.1.1"; */ 
    var endTime = new Date();  //Get the current time. 
    var timeSpent = (endTime - startTime);  //Find out how long it's been. 
    var ip = (window.location != window.parent.location) ? document.referrer: document.location; 
    $(window).load(function(event) { 
     $.post('ajax.php', {ip: ip, timeSpent: timeSpent}); 
    });    
}); 
</script> 

什麼我不明白，這就是爲什麼這不會等到用戶試圖運行此腳本之前離開現場。

任何人都可以幫助我得到這個等待，直到運行？ 謝謝！

Answer 1

你從這件事情中弄得一團糟。所有你需要的是：

var startTime = new Date(); 
window.onbeforeunload = function() { 
    var endTime = new Date();  //Get the current time. 
    var timeSpent = (endTime - startTime);  //Find out how long it's been. 
    var ip = (window.location != window.parent.location) ? document.referrer: document.location; 
    $.post('ajax.php', {ip: ip, timeSpent: timeSpent}); 
}; 

Answer 2

這個代碼有幾個問題，我可以看到。

首先，$(function(){})是$(document).ready(function(){})的簡稱。這意味着它將在DOM準備就緒時運行該函數，然後返回一個jQuery對象（$(document)）。

其次，不需要$(window).load(function(){})。我假設當用戶離開頁面時，DOM已經被加載。

三，window.onbeforeunload（和window.onunload）將不是等待您的AJAX調用完成。您可以嘗試使用async:false以使其等待（可能無法在所有瀏覽器中使用）。

$.ajax({ 
    url: 'ajax.php', 
    data: {ip: ip, timeSpent: timeSpent}, 
    async: false 
}); 

（注：window.onbeforeunload不會在所有的瀏覽器，我知道戲不火吧）

此外，window.onbeforeunload用於詢問用戶是否要離開該頁面或不。如果你從事件中返回一個字符串，將會呈現給用戶（Firefox除外）。

如果您想在用戶離開頁面時發送AJAX呼叫，建議改爲使用window.onunload。

(function(){ // Anonymous function so startTime isn't global 
    var startTime = new Date(); 
    window.onunload = function() { // set to a function 
     var endTime = new Date(); //Get the current time. 
     var timeSpent = (endTime - startTime); //Find out how long it's been. 
     var ip = (window.location != window.parent.location) ? document.referrer: document.location; 
     $.ajax({ 
      url: 'ajax.php', 
      data: {ip: ip, timeSpent: timeSpent}, 
      async: false 
     }); 
    }; 
}());