原文地址：Senden von Daten an den Server, wenn der Benutzer mithilfe von JavaScript zu einer anderen Seite navigiert

Originalautor: Jatin

Übersetzung von: Nuggets Translation Project

Permalink zu diesem Artikel: github.com/xitu/gold-m…

Übersetzer: jjCatherine

Korrektor: Z Zhaojin , finalwhy

Verwenden Sie JavaScript, um das Senden von Daten zu handhaben, wenn die Benutzerseite springt

Foto von Edho Pratama auf Unsplash

Als Entwickler können Sie auf ein solches Szenario stoßen: Auf der PC-Seite muss der Browser überwachen, ob der Benutzer auf eine neue Seite springt? Oder umgeschalteter/geschlossener Tab? Oder hast du den Browser verkleinert/geschlossen? Oder überwachen Sie auf der mobilen Seite, ob der Benutzer vom Browser zu einer anderen App wechselt. In diesem Artikel werden wir untersuchen, wie Sie feststellen können, ob der Inhalt auf der Registerkarte angezeigt oder ausgeblendet wird, und dann die Analysedaten an den Server senden.

Überwachen Sie Seitenänderungen

Mit dem Sichtbarkeitsänderungsereignis kann das Ein-/Ausblenden-Verhalten der Registerkarte aufgezeichnet werden. Dieses Ereignis ist in allen modernen Browsern verfügbar und kann direkt über das Dokumentobjekt document.addEventListener('visibilitychange', ... ) aufgerufen .

Das Aufrufen der VisibilityChange- Methode kann nur zwei mögliche Werte erhalten: sichtbar (angezeigt) und versteckt (versteckt).

Wenn der Wert des visibilitychangeEreignisses ausgeblendet wird, kann dies bedeuten, dass der Benutzer die Seite verlässt. Greifen Sie auf die document.visibilityState-Variable zu, um den aktuellen spezifischen Seitensichtbarkeitsstatus zu erhalten).

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    // user session ended
  }
});
复制代码

Wenn das Ergebnis des Aufrufs des VisibilityChange-Ereignisses sichtbar ist, bedeutet dies außerdem, dass der Benutzer zur aktuellen Seite zurückgekehrt ist.

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // user is back
  }
});
复制代码

Es gibt einen Event-Handler namens onvisibilitychange , der verwendet werden kann, um auf Änderungen an den show- oder hide-Eigenschaften der VisibilityChange -Methode zu lauschen .

document.onvisibilitychange = function() {
  // visibility of page has changed
};
复制代码

Analysedaten an den Server senden

Web-APIs stellen ein Navigator - Objekt bereit, das die sendBeacon()- Methode enthält. Die Methode sendBeacon() ermöglicht es uns, kleine Datenmengen asynchron an den Server zu senden.

Die sendBeacon-Methode akzeptiert zwei Parameter:

Url : Relative oder absolute URI, zu der die Daten empfangen werden.
Daten : Ein Objekt, das Daten enthält, die auf dem Server agieren.

第二个参数 data 接收的数据类型有 ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData 或者 URLSearchParams。

如果数据成功发送到指定的 url 进行数据传输， sendBeacon() 会返回 true。否则，就会返回 false 。

和其它传统技术（像 XMLHttpRequest）相比, sendBeacon 方法是一种更好的发送分析数据的方式。因为通过 XMLHTTPRequest 发送的请求在页面未被加载时会被取消，而 sendBeacon 确保了在给服务器发请求时不被打断。

通过 sendBeacon 方法发送的请求会被用户代理存储在队列中，这也就意味着只要网络是可用的，即使用户关闭了 App，数据最终也会被传输。

当 visibilityState 的值变为 hidden 时，（开发者）就可以调用 sendBeacon 方法把分析数据发送给服务端。

代码实现如下：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analyticslog', data);
  }
});
复制代码

想了解更多的信息，请参考以下 Mozilla 文档：

Wenn Sie Fehler in der Übersetzung oder anderen Bereichen finden, die verbessert werden müssen, gehen Sie bitte zum Nuggets -Übersetzungsprogramm, um die Übersetzung zu überarbeiten und zu veröffentlichen, und Sie können auch entsprechende Belohnungspunkte erhalten. Der Permalink zu diesem Artikel am Anfang des Artikels ist der MarkDown-Link zu diesem Artikel auf GitHub.

Das Nuggets Translation Project ist eine Community, die hochwertige technische Internetartikel übersetzt.Die Quelle der Artikel sind die englischen Sharing-Artikel auf Nuggets. Der Inhalt umfasst Android , iOS , Front-End , Back- End , Blockchain , Produkte , Design , künstliche Intelligenz und andere Bereiche. Wenn Sie mehr qualitativ hochwertige Übersetzungen sehen möchten , achten Sie bitte weiterhin auf den offiziellen Nuggets-Übersetzungsplan Weibo und Zhihu Spalte .

Wenn der Benutzer zu einer anderen Seite springt, verwenden Sie JavaSpript, um Daten an den Server zu senden

Verwenden Sie JavaScript, um das Senden von Daten zu handhaben, wenn die Benutzerseite springt

Überwachen Sie Seitenänderungen

Analysedaten an den Server senden

Ich denke du magst