Comment effacer le bouton de retour à l'aide de JavaScript

L'enregistrement des accès au site Web est une fonctionnalité utile qui nous aide à mieux comprendre le comportement des utilisateurs et l'utilisation du site Web. Pour réaliser cette fonction, la plupart des gens choisiront d'utiliser le bouton de retour du navigateur. Cependant, le bouton de retour peut poser problème dans certaines situations et doit être effacé à l'aide de JavaScript. Dans cet article, nous verrons comment effacer le bouton de retour à l'aide de JavaScript.

Arrière-plans

Le bouton Précédent du navigateur est un outil très puissant qui permet aux utilisateurs de revenir facilement aux pages qu'ils ont visitées précédemment. Cependant, des problèmes peuvent survenir avec le bouton Précédent dans certaines situations. Par exemple, lorsqu'un utilisateur remplit un formulaire et clique sur le bouton Précédent pour revenir à une page précédente, les données du formulaire renseignées peuvent être perdues. Cette situation peut frustrer les utilisateurs et rendre le site Web peu pratique à utiliser.

Solution

Pour résoudre ce problème, nous pouvons utiliser JavaScript pour effacer le bouton de retour. Cela empêche les utilisateurs de revenir à la page sur laquelle ils ont précédemment rempli le formulaire et leur évite de perdre leurs données précédemment renseignées. Voici quelques solutions courantes :

1. Utilisez history.pushState()

Il existe un objet en JavaScript appelé "historique", qui peut enregistrer toutes les pages saisies par l'utilisateur et fournir des méthodes pour accéder à l'historique. Nous pouvons utiliser la méthode history.pushState() pour effacer le bouton de retour. Cette méthode ajoute l'enregistrement d'accès à l'historique de l'utilisateur plutôt que de le remplacer. Cela signifie que lorsque les utilisateurs cliquent sur le bouton Précédent, ils seront redirigés vers la dernière page visitée au lieu de la page précédemment visitée. Dans ce cas, l'utilisateur ne perd pas les données renseignées dans la page.

Voici un exemple :

history.pushState(null, null, location.href);
window.onpopstate = function (event) {
  history.go(1);
};

Dans cet exemple, nous utilisons history.pushState() pour enregistrer les enregistrements d'accès de l'utilisateur. Lorsque l'utilisateur clique sur le bouton Précédent, nous utiliserons l'événement onpopstate pour le rediriger vers la dernière page visitée. De cette façon, même si l'utilisateur clique sur le bouton retour, les données précédemment renseignées dans le formulaire ne seront pas perdues.

2. Désactiver le bouton Précédent

Si vous souhaitez que l'utilisateur ne puisse pas utiliser le bouton Précédent, vous pouvez le désactiver en utilisant le code suivant :

history.pushState(null, null, location.href);
window.onpopstate = function (event) {
  history.go(1);
};
window.addEventListener('load', function() {
  setTimeout(function() {
      history.pushState(null, null, location.href);
  }, 0);
});

Dans ce cas, nous avons utilisé la méthode setTimeout() pour retarder l'exécution de l'appel à la méthode history.pushState(). Cela garantit que le navigateur charge tous les éléments de la page et enregistre la visite.

Il est important de noter que la désactivation du bouton retour peut gêner les utilisateurs et affecter leur utilisation du site Web. Cette solution ne doit donc être utilisée que dans des situations spécifiques.

Conclusion

Le bouton Effacer le retour est une fonctionnalité très utile qui nous aide à empêcher les utilisateurs de perdre les données qu'ils ont renseignées sur la page. Cette fonctionnalité peut être facilement implémentée à l'aide de JavaScript. Cependant, la méthode de désactivation du bouton de retour doit être utilisée avec prudence car cela peut affecter l'utilisation du site Web par l'utilisateur. Quelle que soit la solution que vous choisissez, vous devez vous assurer qu’elle est adaptée à votre site et qu’elle répond aux besoins de vos utilisateurs.

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!