离开页面前执行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调用，建议您改用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
        });
    };
}());

Answer 2

您从整个过程中弄得一团糟。 所有你需要的是：

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