Chiudi la scheda del browser in una finestra del browser
Esistono alcune situazioni specifiche in cui la chiusura di una scheda del browser può essere necessaria ed essenziale, soprattutto se si stanno sviluppando siti Web che supportano sistemi di pagamento (ovviamente possono esserci altri possibili casi di utilizzo). Durante una transazione online, viene creata una sessione e in background accadono varie cose; e durante quel periodo, il lavoro del browser è quello di visualizzare la risposta proveniente dal server in modo che il client o l’utente possano vedere cosa sta succedendo esattamente.
Dopo che la transazione è stata completata, dovremmo chiudere la sessione attualmente in corso all’interno di quella particolare scheda del browser in modo che non possa verificarsi alcun uso improprio delle informazioni personali. Quindi, potrebbe essere fatto chiudendo quella particolare scheda del browser.
Potresti aver visto questo scenario, in cui effettui la transazione online tramite il portale della banca, e poi dopo esserti disconnesso dal conto bancario in rete, la banca visualizza un testo sullo schermo che ci dice di chiudere la finestra del browser. Naturalmente, puoi utilizzare il pulsante di chiusura nel browser oppure puoi anche creare un pulsante di chiusura e chiedere all’utente di fare clic su di esso. Vediamo come possiamo raggiungere questo obiettivo in dettaglio.
Chiudi la scheda del browser utilizzando il metodo window.close() in JavaScript
Per chiudere una scheda del browser, JavaScript ci fornisce un metodo associato a un oggetto finestra e quel metodo si chiama window.close(). Usando questo metodo, possiamo facilmente raggiungere il nostro obiettivo di chiudere una scheda del browser. Puoi anche usare direttamente il metodo close() senza usare la parola chiave window. Questo metodo è supportato su tutti i browser moderni come Chrome, Brave e Firefox.
Quindi, vediamo come implementare questo metodo in JavaScript e chiudere la scheda del browser. All’interno del nostro documento HTML, abbiamo un tag body che contiene un tag anchor e un tag script. Lo script verrà utilizzato per collegare il nostro file JavaScript con il documento HTML. Il tag anchor rappresenterà il pulsante con il quale eseguiremo l’operazione di chiusura della scheda del browser. Lo stile per questo tag di ancoraggio, il nostro pulsante, viene eseguito all’interno del tag stile. Questo tag di ancoraggio punta alla funzione close_tab(), che è presente all’interno del nostro file di 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>
All’interno del nostro file script.js, abbiamo una funzione chiamata close_tab(), che verrà eseguita solo quando l’utente fa clic sul pulsante close browser tab presente nel nostro documento HTML.
function close_tab() {
if (confirm('Do you want to close this tab?')) {
window.close();
}
}
Qui utilizzeremo anche un altro metodo noto come confirm(), che accetta una stringa come parametro. Questo metodo mostrerà un popup o una finestra di avviso con la stringa che abbiamo passato a confirm() come parametro, e avrà anche i pulsanti Ok e Cancel. E chiamiamo questo metodo all’interno dell’istruzione if perché questa funzione restituirà valori true o false.
Quindi, se l’utente ha premuto il pulsante cancel, la funzione confirm() restituirà false. Se l’utente preme il pulsante Ok, la funzione ritornerà true. Se la funzione close() restituisce false, il nostro blocco if non verrà eseguito e se restituisce true, verrà eseguito solo il nostro blocco if e quindi la nostra funzione window.close() verrà eseguito. Quindi chiuderà la scheda del browser.
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