Using the Beacon API - Web APIs 编辑

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The Beacon interface schedules an asynchronous and non-blocking request to a web server.

• Beacon requests use HTTP POST and do not require a response.
• Beacon requests are guaranteed to be initiated before the page unloads.

This document contains examples of the Beacon interfaces. See Beacon API for an overview.

Navigator.sendBeacon()

The Beacon API's Navigator.sendBeacon() method sends a beacon request to the server in the global browsing context. The method takes two arguments: the URL and the data to send. The data argument is optional and its type may be an ArrayBufferView, Blob, DOMString, or FormData.

If the browser successfully queues the request for delivery, the method returns true and returns false otherwise.

The following example specifies a handler for the load and beforeunload events. The handler calls sendBeacon() with the current URL.

window.onload = window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;

  var url = "https://example.com/analytics";
  // Create the data to send
  var data = "state=" + event.type + "&location=" + location.href;

  // Send the beacon
  var status = navigator.sendBeacon(url, data);

  // Log the data and result
  console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};

The following example creates a submit handler and when that event is fired, the handler calls sendBeacon().

window.onsubmit = function send_analytics() {
  var data = JSON.stringify({
    location: location.href,
    time: Date()
  });

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

See also

• Beacon API (Overview)
• Beacon standard
• Beacon CanIUse data