关闭 Chrome 窗口不使用卸载事件处理程序中的 sendBeacon 发送数据

Question

我试图在窗口关闭时发送数据，以防止 2 个人编辑和覆盖彼此的数据。目前我在卸载事件处理程序中使用 sendBeacon。

火狐：

• 刷新：有效
• 后退按钮：有效
• 关闭窗口：作品

铬合金：

• 刷新：有效
• 后退按钮：有效
• 关闭窗口：不起作用

这是我的代码

function sendDataOnClose(edit,trans){

    var url = "../../save.php"; //This has a post request handler and works properly with other functions for saving data

    const data = JSON.stringify
    ({
      "translations": trans,
      "edit": edit
    });

    navigator.sendBeacon(url, data);
  }

function handleClose(){
    if(edit){
      console.log("sending a false when edit is: "+ edit)
      sendDataOnClose(false, translations);
    }
  }

window.addEventListener('unload', handleClose); 

Answer 1

MDN上最新的 sendBeacon 文档指出“navigator.sendBeacon() 方法通过 HTTP 异步发送少量数据到 Web 服务器。It\xe2\x80\x99s 旨在与 VisibilityChange 事件结合使用（但不与 unload 和 beforeunload 事件）。”

\n

要visibilitychange按照建议使用该事件，您可以

\n

document.addEventListener(\'visibilitychange\', function() {\n  if (document.visibilityState === \'hidden\') {\n    navigator.sendBeacon(handleClose);\n  }\n});\n

\n

我在尝试发送事件数据时遇到了类似的问题unload。用户群都在桌面上吗？移动设备无法可靠地触发该unload事件。页面生命周期 API提供了可见性更改事件以及pagehide可以一起使用以更接近您期望的结果的事件。

\n

\n

页面生命周期 API 尝试通过以下方式解决此问题：\n在网络上引入生命周期状态的概念并使其标准化。\n定义新的系统启动状态，允许浏览器限制隐藏或非活动选项卡可消耗的资源。\ n创建新的 API 和事件，使 Web 开发人员能够响应与这些新的系统启动状态之间的转换。\n源

\n

\n

如果浏览器如何暂停页面或完全丢弃它们，您遇到的问题可能更像是一个问题。不幸的是，浏览器在如何执行此操作方面并不统一，并且桌面和移动设备上的行为也不同，这增加了复杂性。

\n

如果您有兴趣，有几个线程可以更深入地探讨这个问题。在浏览器对此进行标准化之前，我不确定是否有一个简单的答案，例如“使用 x 事件”。

\n

在页面可见性上提交的问题

\n

关于 sendBeacon 的 MDN 字符串问题

\n