javascript - onbeforeunload 中的 Ajax 第一次不工作

Question

我一直在尝试通过调用以下脚本来绑定(bind) beforeunload 事件，以便我可以通过 AJAX 转到指定的 URL。问题是 AJAX 第一次没有工作，因为当我第一次刷新页面时 URL 没有被调用。第二次ajax工作。当我将 async 设置为 false 但随后 success 中的警报弹出窗口未显示时，此问题得到解决。我需要警告框也显示在 success block 中。

 <script type="text/javascript">
  $( document ).ready(function() {
    // this method will be invoked when user leaves the page, via F5/refresh, Back button, Window close
    $(window).bind('beforeunload', function(event){
          // invoke the servlet, to logout the user
      $.ajax({
        cache: false,
        type: "GET",
        url: "LogoutController" ,
        success: function (data) {
          alert("You have been logged out");
        }

      });
    });
 });
</script>

Answer 1

beforeunload 将在关闭页面之前等待事件处理程序完成其执行。由于 ajax 调用是异步的，beforeunload 不会等待它完成(但是您的服务器仍应收到请求)。这是预期的行为，我认为这不是解决问题的方法。

可以使用以下代码重现此行为:

window.onbeforeunload = function () {
    console.log("bye");
    setTimeout(function () {
        console.log("bye1");
    }, 200);
    console.log("bye2")
};

//bye
//bye2

此外，您应该注意，根据 MDN规范指出 alert() 可以被忽略:

Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event.

当这种情况发生在 chrome 上时(我只检查了浏览器)，您将在控制台中收到以下消息:

Blocked alert('test') during beforeunload.