Créer un bouton de retour dans une page Web à l'aide de JavaScript

Abid Ullah 30 janvier 2023
  1. Le bouton Retour en HTML
  2. Créer un bouton de retour en HTML en utilisant JavaScript
  3. Utilisez la méthode history.back() pour créer le bouton de retour en JavaScript
  4. Utilisez la méthode history.go() pour créer le bouton de retour en JavaScript
Créer un bouton de retour dans une page Web à l'aide de JavaScript

Dans cet article JavaScript, nous apprendrons comment créer un bouton de retour à l’aide de JavaScript et la nécessité et l’utilisation du bouton de retour en HTML. Nous allons voir comment récupérer la page précédente en utilisant les méthodes intégrées de JavaScript.

Le bouton Retour en HTML

Les navigateurs que nous utilisons ont déjà des boutons de retour, vous devez donc avoir une meilleure raison de devoir mettre le bouton de retour sur votre page. Nous pouvons ajouter un bouton de retour sur une page Web en utilisant du code HTML ou JavaScript.

La page Web aura un bouton ou un lien, et en cliquant dessus, le navigateur reviendra à la page précédente. Cela peut être fait en utilisant du code HTML et un peu de JavaScript côté client.

Créer un bouton de retour en HTML en utilisant JavaScript

Le code de création d’un bouton retour HTML peut être placé n’importe où dans la page. Le bouton de retour que nous créons fonctionnera exactement comme le bouton de retour dans la barre d’outils de notre navigateur.

N’oubliez pas que ce bouton de retour ne fonctionnera pas si l’utilisateur n’a pas d’historique de navigation. Rien ne se passera si l’utilisateur ouvre la page Web et clique sur le bouton de retour.

Utilisez la méthode history.back() pour créer le bouton de retour en JavaScript

Nous avons un objet JavaScript intégré appelé historique dans les navigateurs Web, qui contient toutes les URL qu’un utilisateur a visitées dans la fenêtre actuelle du navigateur. Nous pouvons utiliser cette méthode history.back() pour indiquer au navigateur Web de revenir à la page précédente de l’utilisateur. Pour utiliser cet objet JavaScript intégré, il faut l’ajouter à l’attribut d’événement onclick d’un bouton. Nous créons le bouton à l’aide de l’élément <form>, qui contient l’élément <input> du type de bouton, comme nous le voyons dans le code suivant.

Code-HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h3 class="title">Creating Back Button </h3>
     <form>
 <input type="button" value="Go back!" onclick="history.back()">
     </form>
  </body>
</html>

Production:

Créer un bouton de retour à l&rsquo;aide de la méthode history.back()

Si un utilisateur clique sur le bouton, l’utilisateur revient à la page précédente dans le navigateur.

Utilisez la méthode history.go() pour créer le bouton de retour en JavaScript

Si nous voulons revenir à la page spécifique dans le navigateur, nous utilisons la méthode history.go(). Cette méthode JavaScript intégrée indique au navigateur d’accéder à une page spécifique dans l’historique de navigation.

Nous pouvons donner n’importe quelle histoire spécifique en mettant un nombre entre parenthèses, ce que nous appelons un argument en programmation. Par exemple, en donnant le chiffre -1 comme argument entre parenthèses, le navigateur remonte d’une page dans l’historique du navigateur.

Dans le code suivant, nous avons utilisé la méthode history.go(-1) au lieu de la méthode history.back(). On peut même demander au navigateur de reculer ou d’avancer de plus d’un pas en donnant le chiffre -2 en argument entre parenthèses comme ceci history.go(-2).

Code-HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h3 class="title">Creating Back Button </h3>
     <form>
     <INPUT TYPE="button" VALUE="Go one step back" onClick="history.go(-1);">
     </form>
         <br>
     <form>
     <INPUT TYPE="button" VALUE="Go two steps back" onClick="history.go(-2);">
     </form>
  </body>
</html>

Production:

Créer des boutons de retour à l&rsquo;aide de la méthode history.go()

D’après les résultats de l’image ci-dessus, nous avons deux boutons. Lorsqu’un utilisateur clique sur le premier bouton, le navigateur revient d’une page dans l’historique du navigateur, et si l’utilisateur clique sur le deuxième bouton, le navigateur revient de deux pages dans l’historique de l’utilisateur du navigateur.

La principale différence entre les méthodes history.back() et history.go() est que le back() ne recule que d’une page, mais go() recule et avance le nombre de pages que nous avons passer en paramètre entre parenthèses relatif à notre page web courante.

Auteur: Abid Ullah
Abid Ullah avatar Abid Ullah avatar

My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.

LinkedIn

Article connexe - JavaScript Button