Wie erkennt man Klicks auf die Zurück-Schaltfläche in Webbrowsern genau und vermeidet gleichzeitig falsche Auslöser?

Erkennen des Zurück-Button-Klicks in Webbrowsern: Behebung falscher Auslöser

Beim Versuch, den Zurück-Button-Klick eines Benutzers zu erkennen, verlassen sich Entwickler oft auf die window.onbeforeunload-Ereignis. Dieser Ansatz weist jedoch eine Einschränkung auf: Er wird auch ausgelöst, wenn andere Aktionen ausgeführt werden, beispielsweise das Aktualisieren der Seite.

Eine umfassendere Lösung besteht darin, zwischen Klicks auf die Zurück-Schaltfläche und anderen Ereignissen zu unterscheiden:

Verwendung der History-API:

Dieser Ansatz zielt auf Browser ab, die die History-API (history.pushState-Funktion) unterstützen:

<code class="js">window.onload = function () {
  if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
      history.pushState('newjibberish', null, null);
      // Handle back or forward button clicks here (excluding refresh)
    };
  } else {
    ... // Handle non-History API browsers
  }
}</code>

Verwendung von Hash-Änderungen:

Für Browser ohne History-API-Unterstützung kann eine Fallback-Lösung mithilfe von Hash-Änderungen implementiert werden:

<code class="js">window.onload = function () {
  ... // Similar to History API code
} else {
  var ignoreHashChange = true;
  window.onhashchange = function () {
    if (!ignoreHashChange) {
      ignoreHashChange = true;
      window.location.hash = Math.random();
      // Detect back button click here
      // Note: Messes with hash symbol at the end of URL
    } else {
      ignoreHashChange = false;
    }
  };
}</code>

Behandlung von Aktualisierungsproblemen:

While Die oben genannten Lösungen befassen sich mit der Erkennung der Zurück-Schaltfläche, sie kümmern sich nicht um die Aktualisierung der Seite. Hierzu kann weiterhin window.onbeforeunload verwendet werden:

<code class="js">window.onbeforeunload = function (e) {
  if (e.preventDefault) {
    e.preventDefault();
    e.returnValue = '';
  }
}</code>

Das obige ist der detaillierte Inhalt vonWie erkennt man Klicks auf die Zurück-Schaltfläche in Webbrowsern genau und vermeidet gleichzeitig falsche Auslöser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!