Comment désactiver le bouton retour de votre navigateur en utilisant JavaScript ?-js tutoriel-php.cn

Comment désactiver le bouton retour de votre navigateur en utilisant JavaScript ?

王林

Libérer： 2023-09-07 14:21:02

avant

1064 Les gens l'ont consulté

如何使用 JavaScript 停止浏览器的后退按钮？

La signification du bouton Arrêter le retour du navigateur est d'empêcher l'utilisateur d'accéder à la page précédente. Parfois, pour des raisons de sécurité, nous devons empêcher les utilisateurs d'accéder à la fin de la page en cours.

Par exemple, la plupart des sites Internet des banques ne vous permettent pas de revenir en arrière lorsque vous utilisez la banque en ligne pour effectuer certaines transactions depuis leur site Internet. Car si l’utilisateur revient au milieu d’une transaction, certains problèmes peuvent survenir. Par conséquent, il vous permet uniquement de finaliser la transaction ou de l’annuler et de recommencer.

Ici, nous apprendrons différentes manières d'empêcher les utilisateurs de revenir à la page Web précédente à partir de la page Web actuelle à l'aide de JavaScript. Dans ce didacticiel, nous apprendrons à arrêter le bouton Précédent du navigateur à l'aide de JavaScript ou de jQuery.

Utilisez la méthode window.history.forward()

La méthode

window.history.forward() nous permet de rediriger l'utilisateur vers l'URL précédente. Les objets de fenêtre stockent les objets d'emplacement au format pile. Par conséquent, la méthode forward() de l’objet history trouve le dernier emplacement et redirige l’utilisateur vers l’URL de cet objet location.

Grammaire

Les utilisateurs peuvent utiliser la méthode forward() de l'objet historique selon la syntaxe suivante.

window.history.forward();

Copier après la connexion

Dans la syntaxe ci-dessus, window fait référence à l'objet global et chaque page Web contient l'objet window.

Exemple 1

Dans l'exemple ci-dessous, nous utilisons la balise HTML pour créer un lien qui renvoie l'utilisateur vers la page d'accueil du site TutorialsPoint. En JavaScript, nous venons d'ajouter la méthode window.history.forward().

Désormais, chaque fois que les utilisateurs passent de la page Web actuelle à la page d'accueil du site tutorielsPoint, ils ne pourront pas revenir sur cette page.

<html>
<body> 
   <h2>Preventing the browser's back button using the <i> window.history.forward() </i> method. </h2>
   <h3>Click the below link. </h3>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <script>
      window.history.forward();
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Dans l'exemple ci-dessous, nous utilisons la fonction setTimeOut() pour rediriger l'utilisateur vers la page précédente après une heure précise. Dans la fonction setTimeOut(), nous appelons la méthode window.history.forward() après 1 seconde.

Ainsi, dans le résultat, l'utilisateur peut constater que chaque fois qu'il revient à la page actuelle depuis la page d'accueil du site TutorialsPoint, celle-ci est à nouveau redirigée après 1 seconde.

<html>
<body>
   <h2>Preventing the browser's back button using the <i> window.history.forward() </i> method. </h2>
   <h3>Click the below link. </h3>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint </a> 
   <script>
      setTimeout(() => { window.history.forward() }, 1000);
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode window.history.go()

La méthode

window.history.go() redirige l'utilisateur vers l'URL du dernier emplacement.

Grammaire

Les utilisateurs peuvent utiliser la méthode window.history.go() selon la syntaxe suivante pour arrêter le bouton de retour du navigateur.

<body onload = "stopBack();"></body>
<script>
   function stopBack() {
      window.history.go(1);
   }
</script>

Copier après la connexion

Dans la syntaxe ci-dessus, nous ajoutons l'attribut onload à l'élément HTML et appelons la fonction stopBack().

Exemple 3

Dans l'exemple ci-dessous, nous utilisons la méthode window.history.go() pour rediriger l'utilisateur vers la page précédente. Chaque fois qu'une page Web se charge, elle appelle la fonction stopBack, qui redirige l'utilisateur de la page actuelle vers la page précédente afin que nous puissions arrêter le bouton de retour du navigateur.

<html>
<body onload="stopBack();">
   <h2>Preventing the browser's back button using the <i>window.history.go() </i> method.</h2>
   <h3>Click the below link. </h3>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      function stopBack() {
         window.history.go(1);
      }
   </script>
</body>
</html>

Copier après la connexion

Nous avons appris comment empêcher les utilisateurs de revenir à des pages Web spécifiques. Nous avons utilisé les méthodes window.history.forward() et window.history.go().

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!