Créer un bouton de retour dans une page Web à l'aide de JavaScript
- Le bouton Retour en HTML
- Créer un bouton de retour en HTML en utilisant JavaScript
-
Utilisez la méthode
history.back()pour créer le bouton de retour en JavaScript -
Utilisez la méthode
history.go()pour créer le bouton de retour en 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:
-method.webp)
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:
-method.webp)
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.
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