检测用户是否已离开站点

本文关键字：离开 站点 是否 用户 检测 | 更新日期: 2023-09-27 18:19:05

我目前正在aspx的一个网站上工作，在那里我需要检测和记录用户是否即将离开网站。

如果可能的话，它需要捕获以下所有内容，如果用户:

  • 点击浏览器的后退或前进按钮
    • 点击浏览器关闭按钮
  • 单击选项卡关闭按钮
  • 导航到新网站

检测用户是否已离开站点

如果不太可能，请更改需求，因为这会导致不太理想的用户体验。

至少在某些浏览器上，您可以从onbeforeunload处理程序执行同步 ajax请求，向服务器发送用户正在离开页面的信息:

window.onbeforeunload = function() {
    $.ajax({
        url:   "/path/to/page",
        data:  {/* ...stuff... */,
        async: false // <== Option is being removed soon
    });
};
我说这是一个糟糕的用户体验的原因是，因为ajax调用是同步的，所以它占用了它们，并且在某些浏览器上相当具有侵入性(在等待请求完成时，整个东西都锁定了)。这也是为什么它可能不可靠的跨浏览器。

jQuery团队在某些时候从ajax中删除了async选项。它仍然在底层的XMLHttpRequest对象中，所以当发生这种情况时，您可以直接使用它。

用户离开网站的事实从web服务器日志中已经很明显了，尽管你不知道他们在最后一个页面上花了多长时间。如果"他们在最后一页花了多长时间"真的是非常重要的信息，而不是在他们离开的时候让他们停留(并且依赖于一些可能不完全可靠的跨浏览器的东西)，你可以在他们还在页面上的时候使用背景"ping"。随着时间的推移，ping的间隔越远越好。

例如，当页面加载时:

(function($) {
    var SECOND = 1000;
    var MINUTE = 60000;
    var arrived = +new Date();
    var pingTimes = {
        0:      10 * SECOND, // Every 10 seconds in first minute
        1:      30 * SECOND, // Every 30 seconds in second minute
        2:      45 * SECOND, // Every 45 seconds in third minute
        other:  60 * SECOND, // Every minute otherwise
        long:   10 * MINUTE  // Every 10 minutes if they've been here a long time
    };
    nextPing();
    function ping() {
        $.ajax({
            url:     "/path/to/ping/page",
            method:  "POST",
            success: nextPing,
            error:   nextPing
        });
    }
    function nextPing() {
        var elapsed, pingTime;
        // Get the # of full minutes they've been here
        elapsed = Math.floor((new Date() - arrived) / MINUTE);
        // If it's been a long time, use `pingTimes.long`.
        // Otherwise, use the time from the table or the default.
        pingTime = elapsed > 15 * MINUTE ? pingTimes.long : (pingTimes[elapsed] || pingTimes.other);
        setTimeout(ping, pingTime);
    }
})(jQuery);
相关文章：