Te sugerimos que pruebes esta solución en un ambiente controlado antes de enviarlo a producción, un saludo.
Solución:
Hay ambos window.onbeforeunload y window.onunload, que se utilizan de forma diferente según el navegador. Puede asignarlos configurando las propiedades de la ventana a las funciones, o usando el .addEventListener:
window.onbeforeunload = function()
// Do something
// OR
window.addEventListener("beforeunload", function(e)
// Do something
, false);
Generalmente, onbeforeunload se 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 irse). onunload no es compatible con Óperaque yo sepa, pero siempre puedes configurar ambos.
Ok, encontré una solución funcional para esto, consiste en usar el beforeunload evento 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;
A veces, es posible que desee que el servidor sepa 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 “desconectado” o para iniciar sesión cuando finaliza su sesión.
Históricamente, enviarías una solicitud AJAX en el beforeunload funció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 síncrona, es más confiable, pero el navegador se bloqueará hasta que finalice la solicitud. Si se trata de una solicitud lenta, sería un gran inconveniente para el usuario.
Más tarde vino navigator.sendBeacon(). Al usar el sendBeacon() método, los datos se transmiten de forma asíncrona al servidor web cuando el Agente de usuario tiene la oportunidad de hacerlo, sin retrasar la descarga o afectar el rendimiento de la próxima 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 asíncrona y no afectan la carga de la página siguiente.
A menos que se dirija solo a usuarios de escritorio, sendBeacon() no debe usarse con unload o beforeunload ya que estos no se disparan de manera confiable en dispositivos móviles. En su lugar, puede escuchar el visibilitychange evento. Este evento se activará cada vez que su página esté visible y el usuario cambie de pestaña, cambie de aplicación, vaya a la pantalla de inicio, responda una llamada telefónica, navegue fuera de la página, cierre la pestaña, actualice, etc.
He aquí un ejemplo de su uso:
document.addEventListener('visibilitychange', function()
if (document.visibilityState == 'hidden')
navigator.sendBeacon("/log.php", analyticsData);
);
Cuando el usuario vuelve a la página, document.visibilityState cambiará a 'visible'por lo que también puede manejar ese evento.
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 síncrona en su lugar.
Actualizar:
Podría valer la pena mencionar que sendBeacon() solo envia POST peticiones. Si necesita enviar una solicitud utilizando cualquier otro método, una alternativa sería utilizar el fetch API con el keepalive bandera establecida en truelo que hace que se comporte de la misma manera que sendBeacon(). La compatibilidad del navegador con la API de búsqueda es casi la misma.
fetch(url,
method: ...,
body: ...,
headers: ...,
credentials: 'include',
mode: 'no-cors',
keepalive: true,
)
Recuerda dar difusión a este enunciado si lograste el éxito.