离开页面前执行onbeforeunload的JavaScript操作

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

我可以看到此代码存在一些问题。

首先，$(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并非在所有浏览器中都起作用；我知道Opera不会将其触发。）

另外，window.onbeforeunload用于询问用户是否要离开该页面。如果从事件中返回的字符串将呈现给用户（Firefox中除外）。

如果要在用户离开页面时发送AJAX调用，建议您改用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
        });
    };
}());