En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript.
Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar.
Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar.
Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post.
Prevenir cierre de página con JS
Ya te lo dije: no es posible prevenir, pero sí podemos mostrar un aviso que evitará el cierre de la pestaña o página. Para ello debemos escuchar al evento beforeunload de la ventana, mismo que se desencadena antes de cerrar la página.
Dentro del listener puedes detener al evento y regresar una cadena vacía. Si haces eso, entonces se mostrará una confirmación para avisar al usuario que es posible que los cambios no se guarden si navega a otro lugar.
Código JavaScript
El código JavaScript queda así:
window.addEventListener("beforeunload", (evento) => {
if (true) {
evento.preventDefault();
evento.returnValue = "";
return "";
}
});En este caso estoy encerrando todo dentro de un if(true) para demostrarte que puedes colocar el funcionamiento dentro de un if.
Menciono esto del if porque podrías tener una bandera que te indique si el usuario puede salir de la página, ya que no siempre vas a necesitar mostrar esta alerta.
Por ejemplo, si el usuario ha rellenado un formulario pero no hizo clic en guardar, o hay trabajo pendiente, podrías establecer la bandera en true, lo que prevendría que el usuario dejara la página web.
Ya en caso de que el usuario guardara el trabajo entonces colocarías la bandera en false para que no se ejecutara el código.
El punto es que al usar ese código podremos prevenir de cierto modo que el usuario cierre la pestaña:
Si bien estamos previniendo que el usuario vuelva a cargar la página, el mismo puede elegir en no volver a mostrar la alerta. Así que no podemos evitarlo, solo avisarle al usuario.
Ejemplo
Si te hace falta, te dejo una página HTML de ejemplo:
<!DOCTYPE html>
<html lang="es">
<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>Prevenir que usuario deje la página - By Parzibyte</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias placeat laborum, magni fugiat ab, rerum iure
ducimus, asperiores sequi dolores ex quos labore exercitationem vitae modi autem repudiandae pariatur earum!</p>
<script>
window.addEventListener("beforeunload", (evento) => {
if (true) {
evento.preventDefault();
evento.returnValue = "";
return "";
}
});
</script>
</body>
</html>Sobre Firefox
En el caso de Firefox (me ocurrió al hacer pruebas) se necesita que el usuario haya interactuado primero con la página para poder prevenir el cierre de la pestaña.
Conclusión
De este modo podemos indicar al usuario que no puede abandonar la página porque no ha guardado cambios, o simplemente indicarle que no puede navegar hacia otro lugar.
Igualmente todo esto funciona de esa manera por comodidad del usuario, ya que hay ciertas páginas que podrían abusar de evitar navegar a otro lado, afectando la experiencia de usuario.
Para terminar te dejo con más artículos de JavaScript en mi blog.
¿Y para evitar que salga la ventana cuando se mande un formulario? Gracias
Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!