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

Question

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

Answer 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

Answer 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