¿Ejecutar código JavaScript al cerrar la ventana o actualizar la página?


110

¿Hay alguna forma de ejecutar un código JavaScript final cuando un usuario cierra una ventana del navegador o actualiza la página?

Estoy pensando en algo similar a onload pero más como onclose? Gracias.

No me gusta el método onbeforeunload, que siempre produce un cuadro de confirmación que aparece (dejar la página / permanecer en mozilla) o (recargar / no recargar en Chrome). ¿Hay alguna forma de ejecutar el código de forma silenciosa?




18
Espera, esto en realidad NO ES un duplicado ... Quiere saber cómo ejecutar algo SIN un mensaje para el usuario, las preguntas vinculadas hacen lo contrario ...
Phildo

Respuestas:


84

Existen ambos window.onbeforeunloady window.onunload, que se utilizan de forma diferente según el navegador. Puede asignarlos configurando las propiedades de la ventana en funciones o usando .addEventListener:

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

Por lo general, onbeforeunloadse usa si necesita evitar que el usuario abandone la página (por ejemplo, el usuario está trabajando en algunos datos no guardados, por lo que debe guardarlos antes de salir). onunloadno es compatible con Opera , hasta donde yo sé, pero siempre puedes configurar ambos.


Esto funcionó para mí: Firefox (69.0.2) y Chrome (77.0.3865.90)
FelipeCaparelli

51

Ok, encontré una solución funcional para esto, consiste en usar el beforeunloadevento y luego hacer que el controlador regrese null. Esto ejecuta el código deseado sin que aparezca un cuadro de confirmación. Es algo parecido a esto:

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

Espero que esto ayude.


10
¿No se dispara esto también al navegar hacia afuera y al actualizar (F5)? Si es así, realmente no aborda la pregunta ...
Jago

1
No probado, pero creo que return false;hace lo mismo (es decir, evita el comportamiento predeterminado) y es más semánticamente correcto.
collimarco

1
return false seguirá apareciendo en el cuadro de diálogo preguntándole si desea salir de la página o no. Lo probé en un ancla. Con return null, el cuadro de diálogo no apareció, pero sí lo hizo console.log
Ricky Stam

20

A veces, es posible que desee informar al servidor que el usuario está abandonando la página. Esto es útil, por ejemplo, para limpiar imágenes no guardadas almacenadas temporalmente en el servidor, para marcar a ese usuario como "fuera de línea" o para iniciar sesión cuando haya terminado su sesión.

Históricamente, enviaría una solicitud AJAX en la beforeunloadfunción, sin embargo, esto tiene dos problemas. Si envía una solicitud asincrónica, no hay garantía de que la solicitud se ejecute correctamente. Si envía una solicitud sincrónica, es más confiable, pero el navegador se bloqueará hasta que finalice la solicitud. Si esta es una solicitud lenta, esto sería un gran inconveniente para el usuario.

Afortunadamente, ahora tenemos navigator.sendBeacon(). Al utilizar el sendBeacon()método, los datos se transmiten de forma asincrónica al servidor web cuando el Agente de usuario tiene la oportunidad de hacerlo, sin retrasar la descarga ni afectar el rendimiento de la siguiente navegación. Esto resuelve todos los problemas con el envío de datos analíticos: los datos se envían de manera confiable, se envían de forma asincrónica y no afecta la carga de la página siguiente. Aquí hay un ejemplo de su uso:

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()es compatible con:

  • Borde 14
  • Firefox 31
  • Cromo 39
  • Safari 11.1
  • Ópera 26
  • iOS Safari 11.4

Actualmente NO es compatible con:

  • explorador de Internet
  • mini Opera

Aquí hay un polyfill para sendBeacon () en caso de que necesite agregar soporte para navegadores no compatibles. Si el método no está disponible en el navegador, enviará una solicitud AJAX sincrónica en su lugar.


Esta pregunta estaba en el ámbito de un caso "Para enviar una solicitud al servidor". La idea era poder controlar las pestañas abiertas por usuario y limpiar el backend cuando se cierra una pestaña.
Peter

@Peter Lo estaba incluyendo para completar, pero lo borré.
Mike

@ Mike, por favor, NO elimines tu respuesta. No solo completa la mejor respuesta seleccionada (debe ser la suya), sino que también presenta el evento utilizado para detectar la salida o el cierre de la ventana
Alex8752

@ Alex8752 No eliminé mi respuesta, edité una parte que era irrelevante para la pregunta, que puede ver aquí .
Mike

1
@AshokKumar Tienes el control de lo que envías al servidor. Si desea enviar cosas por GET, no hay nada que le impida enviar su solicitud a algo como http://example.com/script.php?token=something&var1=val1&var2=val2poner esos valores en GET.
Mike

14

Versión de jQuery:

$(window).unload(function(){
    // Do Something
});

Actualización : jQuery 3:

$(window).on("unload", function(e) {
    // Do Something
});

Gracias Garrett


8

La documentación aquí anima a escuchar el evento onbeforeunload y / o agregar un detector de eventos en la ventana.

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

También puede completar las propiedades .onunload o .onbeforeunload de la ventana con una función o una referencia de función.

Aunque el comportamiento no está estandarizado en todos los navegadores, la función puede devolver un valor que el navegador mostrará al confirmar si abandona la página.


7

Puede utilizar window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}

3

Se llama al evento beforeunload, por lo que puede asignar una función a window.onbeforeunload.


-2

Puedes probar algo como esto:

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">

23
Tenga cuidado, las personas que leen esto en tiempos no antiguos: esto es JS y HTML antiguos y las otras sugerencias aquí son mucho mejores.
RAnders00
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.