Cerrar la pestaña del navegador en una ventana del navegador
Hay algunas situaciones específicas en las que cerrar una pestaña del navegador puede ser necesario y esencial, especialmente si está desarrollando sitios web que admiten sistemas de pago (por supuesto, puede haber otros posibles casos de uso). Durante una transacción en línea, se crea una sesión y suceden varias cosas en segundo plano; y durante ese tiempo, el trabajo del navegador es mostrar la respuesta proveniente del servidor para que el cliente o usuario pueda ver qué sucede exactamente.
Una vez que se completa la transacción, se supone que debemos cerrar la sesión que está ocurriendo actualmente dentro de esa pestaña del navegador en particular para que no se produzca un mal uso de la información personal. Por lo tanto, podría hacerlo cerrando esa pestaña del navegador en particular.
Es posible que haya visto este escenario, en el que realiza la transacción en línea a través del portal del banco, y luego, después de cerrar la sesión de la cuenta bancaria neta, el banco muestra un texto en la pantalla que nos indica que cerremos la ventana del navegador. Por supuesto, puede usar el botón de cierre en el navegador, o también puede crear un botón de cierre y pedirle al usuario que haga clic en él. Veamos cómo podemos lograr esto en detalle.
Cerrar la pestaña del navegador usando el método window.close() en JavaScript
Para cerrar una pestaña del navegador, JavaScript nos proporciona un método asociado con un objeto de ventana, y ese método se llama window.close(). Con este método, podemos lograr fácilmente nuestro objetivo de cerrar una pestaña del navegador. También puede utilizar directamente el método close() sin utilizar la palabra clave window. Este método es compatible con todos los navegadores modernos como Chrome, Brave y Firefox.
Entonces, veamos cómo implementar este método en JavaScript y cierre la pestaña del navegador. Dentro de nuestro documento HTML, tenemos una etiqueta de cuerpo que contiene una etiqueta de anclaje y una etiqueta de secuencia de comandos. El script se utilizará para vincular nuestro archivo JavaScript con el documento HTML. La etiqueta de anclaje representará el botón con el que realizaremos la operación de cierre de la pestaña del navegador. El estilo de esta etiqueta de anclaje, nuestro botón, se realiza dentro de la etiqueta style. Esta etiqueta de anclaje apunta a la función close_tab(), que está presente dentro de nuestro archivo 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>
Dentro de nuestro archivo script.js, tenemos una función llamada close_tab(), que se ejecutará solo cuando el usuario haga clic en el botón close browser tab presente en nuestro documento HTML.
function close_tab() {
if (confirm('Do you want to close this tab?')) {
window.close();
}
}
Aquí, también usaremos otro método conocido como confirm(), que toma una cadena como parámetro. Este método mostrará una ventana emergente o cuadro de alerta con la cadena que le hemos pasado al confirm() como parámetro, y también tendrá los botones Ok y Cancel. Y llamamos a este método dentro de la declaración if porque esta función devolverá valores true o false.
Entonces, si el usuario presionó el botón cancel, entonces la función confirm() devolverá false. Si el usuario presiona el botón Ok, la función devolverá true. Si la función close() devuelve false, entonces nuestro bloque if no se ejecutará y si devuelve true, solo se ejecutará nuestro bloque if y luego nuestra función window.close() Se ejecutará. Luego cerrará la pestaña del navegador.
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