Ejecutar código al cerrar la ventana del navegador o actualizar la página

A menudo, es deseable realizar acciones específicas cuando un usuario cierra una ventana del navegador o actualiza una página web. Afortunadamente, hay dos controladores de eventos disponibles para abordar esta necesidad: window.onbeforeunload y window.onunload.

window.onbeforeunload

El evento onbeforeunload se activa cuando un usuario intenta salir de una página. Por lo general, se utiliza para mostrar un cuadro de confirmación que le pide al usuario que confirme su elección o le impide abandonar la página si tiene datos no guardados. Sin embargo, al no devolver una cadena o configurar event.returnValue, puedes evitar que el navegador muestre un mensaje y ejecute tu código de forma silenciosa.

window.onunload

El El evento onunload se activa cuando se descarga una página del navegador. Se usa comúnmente para realizar tareas de limpieza, como eliminar detectores de eventos persistentes o cerrar conexiones de bases de datos.

Implementación

Tanto onbeforeunload como onunload se pueden asignar a propiedades de ventana o utilizando el método .addEventListener. Aquí hay un ejemplo:

// window property
window.onbeforeunload = function() {
  // Do something
};

// .addEventListener
window.addEventListener("beforeunload", function(e) {
  // Do something
});

Nota:

En el caso de los iframes, los eventos onbeforeunload no se activan cuando el iframe es eliminado por su padre, pero los eventos de descarga y ocultación de página sí lo hacen. Sin embargo, Firefox actualmente tiene un error que impide que estos eventos se activen en casos de eliminación de iframe, lo que hace imposible ejecutar el código inmediatamente antes de que se elimine un iframe en Firefox.