Comment détecter avec précision les clics sur le bouton Retour dans les navigateurs Web tout en évitant les faux déclencheurs ?

Détection du clic sur le bouton Précédent dans les navigateurs Web : résolution des faux déclencheurs

Lorsqu'ils tentent de détecter le clic sur le bouton Précédent d'un utilisateur, les développeurs s'appuient souvent sur le Événement window.onbeforeunload. Cependant, cette approche présente une limite : elle se déclenche également lorsque d'autres actions sont effectuées, comme l'actualisation de la page.

Une solution plus complète consiste à faire la différence entre les clics sur le bouton retour et d'autres événements :

Utilisation de l'API History :

Cette approche cible les navigateurs qui prennent en charge l'API History (fonction history.pushState) :

<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>

Utilisation des modifications de hachage :

Pour les navigateurs sans prise en charge de l'API d'historique, une solution de secours peut être implémentée à l'aide de modifications de hachage :

<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>

Gestion du problème d'actualisation :

Pendant que les solutions ci-dessus concernent la détection du bouton de retour, elles ne gèrent pas l'actualisation de la page. Pour cela, window.onbeforeunload peut toujours être utilisé :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!