Javascript 是否在页面卸载前执行服务器API调用/页面卸载限制？

下面的代码用于在chrome中工作，但由于chrome最近的更改“不允许在页面中同步XHR”而突然停止。Crome在2019年4月初的最新更新中，我认为Chrome 73.0.3683.103停止了这一功能，他们建议sendBeacon或fetch keepalive。我将发布我尝试过的内容，这样可能会帮助其他人

我知道有几个相关的帖子与同样的情况有关，但仍然找不到解决办法。我尝试了几种方法来拨打服务器电话

步骤1：

$(window).on('beforeunload', function (e) {
 if (navigator.sendBeacon) {
    navigator.sendBeacon('url', 'data');
 } else {
    $.ajax({
        type: 'POST',
        url: 'url',
        data: null,
        contentType: 'application/json;',
        async: false
    });
 }
}

由于内容类型-应用程序json，此操作不起作用

步骤2：

$(window).on('beforeunload', function (e) {
 var data = { ajax_data: 22 };
 var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
 navigator.sendBeacon('url', blob);
}

由于sendBeacon仅支持这些内容类型，因此此代码不起作用

• 多部分/表单数据
• 应用程序/x-www-form-urlencoded
• 文本/纯文本

步骤3：

 $(window).on('beforeunload', function (e) {
  if (fetch) {
    fetch(url, {
        method: "POST", headers: { "Content-Type": "application/json" } 
    }).then(function (response) {
        console.log(response.statusText);
    }).then(function (response) {
        console.log(response.statusText);
    });
    return false;
 } else {
    $.ajax({
        type: 'POST',
        url: 'url',
        data: null,
        contentType: 'application/json;',
        async: false
    });
 }
}

此代码有效！。但仅当您单击页面上的链接或单击“注销”按钮时。我需要在用户单击链接、注销、关闭选项卡和关闭浏览器离开页面时使用此服务器方法

步骤4：

$(window).on('beforeunload', function (e) {
     e.stopPropagation();
     e.preventDefault();
     fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' } }); 
}

这将显示一个弹出窗口“离开网站？”，我不想让用户显示任何弹出窗口

步骤5：

$(window).on('beforeunload', function (e) {
      setTimeout(function ()
      {
           fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' } });        
      }, 3000);
      return false;
}

与步骤4相同，显示“离开站点弹出窗口”

---

现在我已经没有选择了，还没有找到解决方案。谢谢你的帮助。我需要一个服务器调用之前，通过点击链接，注销，标签关闭，浏览器关闭页面卸载。如果设置断点，上面的代码将起作用，这意味着在页面卸载之前发送服务器调用需要一些时间延迟。如果用户没有看到任何弹出窗口（如“离开站点？”），我不介意设置超时。这是一个老问题，但您需要在beforeuload事件中使用fetch，并将

keepalive

标志设置为

true

：

fetch(url, {
   method: "POST",
   keepalive: true, 
   headers: { 
      "Content-Type": "application/json" 
   }
});

sendBeacon

的行为与文档声称的不同。在我的测试中，它不尊重请求主体中Blob的MIME类型，即使Blob是“受支持的”MIME类型

改用

fetch

。它为您提供了对请求头的更多控制，同时保证您的请求将像

sendBeacon

那样发出

---

您可能还需要在页面主体中绑定beforeunload事件。jQuery绑定可能不适用于beforeunload。

我认为如果不使用sendBeacon，这是不可能的，这些类型的功能正在被故意删除，因为人们将它们用于邪恶的目的

fetch(url, {
   method: "POST",
   keepalive: true, 
   headers: { 
      "Content-Type": "application/json" 
   }
});