在beforeunload/页面卸载限制上执行服务器API调用？

Question

以下代码用于在 chrome 中工作，但由于 chrome 最近的更改“在页面关闭中禁止同步 XHR”而突然停止。 最近 2019 年 4 月上旬对 Crome 的更新，我认为 Chrome 73.0.3683.103 停止了此功能，他们建议使用 sendBeacon 或 fetch keepalive。 我将发布我尝试过的内容，以便这可能对其他人有所帮助。

https://www.chromestatus.com/feature/4664843055398912

$(window).on('beforeunload', function (e) {
     //ajax call used work in Chrome 
}

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

我知道有几个与相同情况相关的相关帖子，但仍然找不到解决方案。 我尝试了几种方法来进行服务器调用。

第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
    });
 }
}

由于内容类型，这不起作用 - application-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
    });
 }
}

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

第四步：

$(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 相同，显示“离开站点弹出窗口”。

现在我的选择用完了，还没有找到解决方案。 任何帮助表示赞赏。 我需要在页面卸载之前调用服务器，方法是单击链接、注销、关闭选项卡、关闭浏览器。 如果您设置断点，上面的代码将起作用，这意味着在页面卸载之前发送服务器调用需要一些时间延迟。 如果用户没有看到任何像“离开站点？”这样的弹出窗口，我不介意设置超时。

Answer 1

这是一个老问题，但您需要使用 fetch 在 beforeunload 事件中将keepalive标志设置为true ：

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

sendBeacon行为不像文档声称的那样。 在我的测试中，它不尊重请求正文中 Blob 的 MIME 类型，即使 Blob 是“受支持的”MIME 类型。

使用fetch代替。 它使您可以更好地控制请求标头，同时保证您的请求会像sendBeacon那样发出。

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