Fermer l'onglet Navigateur dans une fenêtre de navigateur
Il existe des situations spécifiques où la fermeture d’un onglet de navigateur peut être nécessaire et essentielle, surtout si vous développez des sites Web qui prennent en charge les systèmes de paiement (bien sûr, il peut y avoir d’autres cas d’utilisation possibles). Lors d’une transaction en ligne, une session est créée et diverses choses se produisent en arrière-plan ; et pendant ce temps, le travail du navigateur est d’afficher la réponse provenant du serveur afin que le client ou l’utilisateur puisse voir ce qui se passe exactement.
Une fois la transaction terminée, nous sommes censés fermer la session en cours dans cet onglet de navigateur particulier afin qu’aucune utilisation abusive des informations personnelles ne puisse se produire. Ainsi, cela pourrait être fait en fermant cet onglet de navigateur particulier.
Vous avez peut-être vu ce scénario, où vous effectuez la transaction en ligne via le portail de la banque, puis après vous être déconnecté du compte bancaire net, la banque affiche un texte à l’écran qui nous dit de fermer la fenêtre du navigateur. Bien sûr, vous pouvez utiliser le bouton de fermeture dans le navigateur, ou vous pouvez également créer un bouton de fermeture et demander à l’utilisateur de cliquer dessus. Voyons comment nous pouvons y parvenir en détail.
Fermer l’onglet du navigateur à l’aide de la méthode window.close() en JavaScript
Pour fermer un onglet de navigateur, JavaScript nous fournit une méthode associée à un objet window, et cette méthode s’appelle window.close(). En utilisant cette méthode, nous pouvons facilement atteindre notre objectif de fermer un onglet de navigateur. Vous pouvez également utiliser directement la méthode close() sans utiliser également le mot-clé window. Cette méthode est prise en charge sur tous les navigateurs modernes comme Chrome, Brave et Firefox.
Voyons donc comment implémenter cette méthode en JavaScript et fermer l’onglet du navigateur. Dans notre document HTML, nous avons une balise body qui contient une balise d’ancrage et une balise de script. Le script sera utilisé pour lier notre fichier JavaScript avec le document HTML. La balise d’ancrage représentera le bouton à l’aide duquel nous effectuerons l’opération de fermeture de l’onglet du navigateur. Le style de cette balise d’ancrage, notre bouton, se fait à l’intérieur de la balise style. Cette balise d’ancrage pointe vers la fonction close_tab(), qui est présente à l’intérieur de notre fichier de script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin-top: 50px;
margin-left: 50px;
}
a{
width: 100px;
height: 50px;
background-color: brown;
color: #ffffff;
text-decoration: none;
padding: 10px;
}
</style>
</head>
<body>
<!-- This is a button -->
<a href="javascript:close_tab();">close browser tab</a>
<script src="script.js"></script>
</body>
</html>
A l’intérieur de notre fichier script.js, nous avons une fonction appelée close_tab(), qui ne sera exécutée que lorsque l’utilisateur cliquera sur le bouton fermer l'onglet navigateur présent dans notre document HTML.
function close_tab() {
if (confirm('Do you want to close this tab?')) {
window.close();
}
}
Ici, nous utiliserons également une autre méthode connue sous le nom de confirm(), qui prend une chaîne en paramètre. Cette méthode affichera une fenêtre contextuelle ou une boîte d’alerte avec la chaîne que nous avons passée à confirm() en tant que paramètre, et elle aura également des boutons Ok et Cancel. Et nous appelons cette méthode à l’intérieur de l’instruction if parce que cette fonction renverra des valeurs true ou false.
Ainsi, si l’utilisateur a appuyé sur le bouton cancel, alors la fonction confirm() retournera false. Si l’utilisateur appuie sur le bouton Ok, alors la fonction retournera true. Si la fonction close() renvoie false alors notre bloc if ne sera pas exécuté et s’il renvoie true alors seul notre bloc if sera exécuté puis notre fonction window.close() s’exécutera. Il fermera alors l’onglet du navigateur.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn