Navigator sendBeacon页面关闭也能发送请求方法示例

Navigator.sendBeacon()是一个异步方法，用于在浏览器后台向服务器发送小量数据。通常，该方法在页面关闭时使用，以确保在离开页面前将相关数据传输到服务器。该方法可以将数据发送到服务器，即使页面已关闭或卸载。

下面是使用sendBeacon()方法的完整攻略：

1. 定义数据

定义要传递的数据。可以使用FormData或JSON等格式。

const data = new FormData();
data.append('username', 'example');

2. 发送数据

window.addEventListener('unload', function(event) {
    navigator.sendBeacon('/log', data);
});

上述代码在页面关闭或卸载时触发，发送数据到指定的URL。URL参数为“/log”，数据为定义的data变量。

示例1：发送文件

在这个示例中，我们将使用sendBeacon()方法上传文件。具体步骤如下。

1. 定义可上传的文件

<input type="file" id="file-input">

1. 定义事件监听器

document.querySelector('#file-input').addEventListener('change', function(event) {
  const fileList = event.target.files;
  const file = fileList[0];

  const data = new FormData();
  data.append('file', file);

  navigator.sendBeacon('/upload', data);
});

这将上传名称为“file”的文件到指定的URL。

示例2：将数据发送到多个URL

在此示例中，将演示如何将同一数据发送到多个URL。具体步骤如下。

1. 定义数据

const data = new FormData();
data.append('username', 'example');

1. 定义URL列表

const urls = ['/log1', '/log2', '/log3'];

1. 循环URL列表并发送数据

for (let i = 0; i < urls.length; i++) {
  navigator.sendBeacon(urls[i], data);
}

这将在页面关闭或卸载时将数据发送到指定的URL。在此示例中，数据将发送到“/log1”，“/log2”和“/log3”。