6

我试图在窗口关闭时发送数据，以防止 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);
4

2 回答 2

1

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

要使用visibilitychange建议的事件，您可以

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

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

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

您遇到的问题可能更多的是一个问题，而不是浏览器如何暂停页面或完全丢弃它们。不幸的是，浏览器在如何做到这一点上并没有统一，而且更复杂的是，桌面和移动端的行为不同。

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

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

MDN 关于 sendBeacon 的问题

于 2020-12-23T14:25:14.127 回答
0

多亏了黑客，出于安全原因，许多其他东西都被删除了。

我注意到你的问题也有 PHP 标签；我会给你一个，不是好主意，而是一个实用的。避免关闭页面处理，即使是 JavaScript 或框架也只是使用 JavaScript 发布一个表数据库，您存储的表数据库time()和一个目标 ID，然后如果超时可能超过您设置的 30 秒，那么您将从表中删除这些东西，您就会知道页面仍然无法工作（翻译：使用服务器“在线用户”的想法（糟糕但必要的想法，就像任何东西都会在应用程序中产生大量流量）。

在客户端的 JavaScript 中使用这些是个坏主意，你会为利用你的应用程序的坏人打开大门。

于 2020-12-26T08:58:58.290 回答