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.
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.
El código JavaScript queda así:
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.
Si te hace falta, te dejo una página HTML de ejemplo:
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.
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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios
¿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!