Una pestaña o ventana que se cierra en un navegador se puede detectar usando el evento beforeunload. Esto se puede usar para alertar al usuario en caso de que algunos datos no se guarden en la página, o el usuario haya navegado por error fuera de la página actual al cerrar la pestaña o el navegador.
El método addEventListener() se usa para configurar una función cada vez que ocurre un evento determinado. El evento beforeunload se activa justo antes de que se descarguen las ventanas y sus recursos. Cuando se activa este evento, la página web está visible y el evento todavía se puede cancelar en este punto.
El controlador de eventos debe llamar a preventDefault() para mostrar el cuadro de diálogo de confirmación de acuerdo con las especificaciones. Si el usuario desea continuar a una nueva página, navega a la nueva página, de lo contrario, la navegación se cancela. Sin embargo, es posible que los navegadores más antiguos no admitan este método y se utiliza un método heredado en el que el controlador de eventos debe devolver una string. Esta string devuelta puede estar vacía.
Algunos navegadores pueden decidir no mostrar ningún cuadro de confirmación a menos que el usuario haya interactuado con la página. Esto se utiliza para evitar que los sitios web no deseados o maliciosos creen ventanas emergentes innecesarias. El usuario puede tener que interactuar con la página para ver el mensaje de confirmación.
Este método funciona para detectar tanto cuando se está cerrando una pestaña como cuando se está cerrando el navegador.
Sintaxis:
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect browser or tab closing
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>Detect browser or tab closing</b>
<p>
The beforeunload function is triggered
just before the browser or tab is to be
closed or the page is to be reloaded.
Modern browsers require some interaction
with the page, otherwise the dialog box
is not shown.
</p>
<form>
<textarea placeholder = "Trigger an
interaction by writing something here">
</textarea>
</form>
<script type="text/javascript">
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
</script>
</body>
</html>
Producción:
- Antes de navegar por la pestaña:
- Después de intentar navegar fuera de la página:
- Después de intentar recargar la página:
- Después de intentar cerrar el navegador:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA