用户关闭浏览器或选项卡时如何注销用户答案

【问题标题】：How to logout the user when user closes the browser or tab用户关闭浏览器或选项卡时如何注销用户
【发布时间】：2019-04-17 01:13:24
【问题描述】：

window.onbeforeunload 事件未在服务器端发送 ajax 请求

我想在用户关闭浏览器或选项卡时注销用户。我已经实现了window.onbeforeunload 事件，但是在这个方法上，ajax 请求不起作用。

window.onbeforeunload = function() {
  var d = {
    userid: 123
  };
  $.ajax({
    type: 'POST',
    url: 'https://example.com/api/logout',
    data: d,
    async: false
  });

  return null;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
need html perhaps

【问题讨论】：

这是否被调用，你能确认是这样吗？注意：通常我认为window.addEventListener("beforeunload", function(event) { ... }); 应该是事件监听器的首选形式。您还可能希望在卸载之前将其返回event.preventDefault();
添加alert 以查看代码是否被命中。
注意：async:false 已弃用，请参阅 stackoverflow.com/q/11448011/125981 和 api.jquery.com/jQuery.ajax
如果用户打开并登录了两个浏览器窗口/选项卡怎么办？这可能会带来您可能会处理的可用性问题。

标签： javascript jquery

【解决方案1】：

正如您已经想到的，您的操作是异步的，因此不会停止关闭浏览器。

不再支持async: false。不是 jquery 也不是浏览器。

http://api.jquery.com/jquery.ajax/

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

因此您必须在success 事件发生之前取消该事件，如此处所述。

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

【讨论】：

已弃用，但仍受支持 - 至少对我来说是不同的。 “您的操作是异步的” - 请澄清，因为 ajax 不是 OP 问题中发布的异步。
我的意思是不支持，我从来没有设法让 ajax 真正同步，它总是异步的。因此正确的方法是取消事件，执行 ajax，然后通过代码关闭窗口

【解决方案2】：

还有很多关于这个的问题（两个浏览器窗口，接下来会发生什么，如果失败怎么办，

function handleMyUnload(e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';

  var d = {
    userid: 123
  };
  $.ajax({
    type: 'POST',
    url: 'https://example.com/api/logout',
    data: d,
    async: false
  }).done(function(data, textStatus, jqXHR) {
    // ajax is done, so remove the handler
    window.removeEventListener("beforeunload", handleMyUnload, false);
    // leave it to you to determine what happens next (close, reload, navigate etc.) here
  }).fail(function(){
    // do what?
  });
  return null;
}
window.addEventListener("beforeunload", handleMyUnload, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
need html perhaps

【讨论】：

worker 之外的同步 XMLHttpRequest 正在从 Web 平台中移除，因为它会对最终用户的体验产生不利影响。（这是一个需要很多年的漫长过程。）当当前全局对象是 Window 对象时，开发人员不得为 async 参数传递 false。强烈建议用户代理在开发人员工具中警告此类使用，并且可以尝试在发生“InvalidAccessError”DOMException 时抛出它。见WHATWG XHR Spec。