JavaScript,浏览器,窗口关闭 - 发送AJAX请求或在窗口关闭时运行脚本

Question

我试图找出用户何时离开指定页面.找到他在页面内部使用链接导航时没有问题,但我需要标记一些内容,例如当他关闭窗口或输入另一个URL并按下回车时.第二个不是那么重要,但第一个是.所以这是一个问题:

我怎么能看到用户何时关闭我的页面(捕获window.close事件),然后......并不重要(我需要发送一个AJAX请求,但如果我能让它运行警报,我可以做其余的).

Answer 1

有unload和beforeunloadjavascript事件,但这些对于Ajax请求是不可靠的(不能保证在其中一个事件中启动的请求将到达服务器).

因此,强烈建议不要这样做,您应该寻找替代方案.

如果您确实需要这个,请考虑使用"ping"式解决方案.每分钟发送一个请求,基本上告诉服务器"我还在这里".然后,如果服务器没有收到超过两分钟的请求(您必须考虑延迟等),您认为客户端脱机.

另一种解决方案是使用unload或beforeunload执行Sjax请求(同步JavaScript和XML),但完全不推荐这样做.这样做基本上会冻结用户的浏览器,直到请求完成,这是他们不喜欢的(即使请求花费的时间很少).

Answer 2

1)如果您正在寻找在所有浏览器中工作的方法,那么最安全的方法是将同步AJAX发送到服务器.这不是一个好方法,但至少要确保您没有向服务器发送太多数据,并且服务器速度很快.

2)您还可以使用异步AJAX请求,并在服务器上使用ignore_user_abort函数(如果您使用的是PHP).但是,ignore_user_abort在很大程度上取决于服务器配置.确保你测试得好.

3)对于现代浏览器,您不应发送AJAX请求.您应该使用新的navigator.sendBeacon方法异步发送数据到服务器,而不会阻止下一页的加载.由于您希望在用户移出页面之前将数据发送到服务器,因此您可以在卸载事件处理程序中使用此方法.

$(window).on('unload', function() {
    var fd = new FormData();
    fd.append('ajax_data', 22);
    navigator.sendBeacon('ajax.php', fd);
});

似乎还有一个sendBeacon的polyfill.如果方法本身不可用,它会转向发送同步AJAX.

移动设备的重要事项:请注意,不保证会为移动设备触发卸载事件处理程序.但是可以保证可以触发visibilitychange事件.因此,对于移动设备,您的数据收集代码可能需要进行一些调整.

您可以参考我的博客文章,了解所有3种方式的代码实现.

Answer 3

为了说清楚,在2018年,Beacon API是解决这个问题的解决方案(几乎在所有浏览器上)

保证在卸载页面之前启动信标请求,并且它们运行完成,而不需要阻止请求.

您可以在onunload活动中使用它,并确信它将被发送.

$(window).on('unload', function() {

    var URL = "https://example.com/foo";
    var data = "bar";

    navigator.sendBeacon(URL, data);

});