Identificar entre acciones de actualización y cierre del navegador

Hay una solucion.

Quería desconectar al usuario en el servidor cuando se cerraba la pestaña o la ventana del navegador, pero no cuando se recargaba la página (es posible que desee diferenciar los eventos de recarga/cierre para un propósito diferente, pero puede beneficiarse de mi solución). Terminé con el siguiente proceso, basado en el almacenamiento local de HTML5 y la comunicación AJAX cliente/servidor:

1. en su página, agregue un onunloadal windowsiguiente controlador (pseudo-javascript):

   function myUnload(event) {
       if (window.localStorage) {
           // flag the page as being unloading
           window.localStorage['myUnloadEventFlag']=new Date().getTime();
       }
   
       // notify the server that we want to disconnect the user in a few seconds (I used 5 seconds)
       askServerToDisconnectUserInAFewSeconds(); // synchronous AJAX call
   }
   

2. en su página, agregue un onloadal bodysiguiente controlador (pseudo-javascript):

   function myLoad(event) {
       if (window.localStorage) {
           var t0 = Number(window.localStorage['myUnloadEventFlag']);
           if (isNaN(t0)) t0=0;
           var t1=new Date().getTime();
           var duration=t1-t0;
           if (duration<10*1000) {
               // less than 10 seconds since the previous Unload event => it's a browser reload (so cancel the disconnection request)
               askServerToCancelDisconnectionRequest(); // asynchronous AJAX call
           } else {
               // last unload event was for a tab/window close => do whatever you want (I do nothing here)
           }
       }
   } 
   

3. en el servidor, recopile las solicitudes de desconexión en una lista y configure un hilo de temporizador que inspeccione la lista a intervalos regulares (yo usé cada 20 segundos). Una vez que se agota el tiempo de espera de la solicitud de desconexión (es decir, pasan los 5 segundos), desconecte al usuario del servidor. Si mientras tanto se recibe una cancelación de solicitud de desconexión, la solicitud de desconexión correspondiente se elimina de la lista, de modo que el usuario no será desconectado.

Este enfoque también es aplicable si desea diferenciar entre el evento de cierre de pestaña/ventana y los enlaces seguidos o el formulario enviado. Solo necesita colocar los dos controladores de eventos en cada página que contenga enlaces y formularios y en cada página de inicio de enlace/formulario.

Tenga en cuenta que uso el unloadevento en lugar del beforeUnloadevento para administrar correctamente los enlaces a los archivos adjuntos: cuando un usuario hace clic en un enlace a un archivo adjunto (por ejemplo, un archivo PDF), beforeUnloadse envía el evento, luego se genera una ventana emergente para abrir/guardar y nada más (el navegador no cambia la página mostrada y no envía el unloadevento). Si estuviera usando el beforeUnloadevento (como lo hice antes), habría detectado un cambio de página cuando no hay ninguno.

Este enfoque se limita a los navegadores que admiten almacenamiento local HTML5, por lo que probablemente utilizaría enfoques específicos para navegadores antiguos como MSIE7.

Otros enfoques basados ​​en event.clientYno son confiables porque este valor es negativo al hacer clic en los botones de recarga o cierre de pestaña/ventana, y positivo cuando se usan atajos de teclado para recargar (por ejemplo, F5, Ctrl-R, ...) y cerrar la ventana ( por ejemplo, Alt-F4). Confiar en la posición del evento X tampoco es confiable porque los botones no están ubicados en la misma posición en todos los navegadores (por ejemplo, el botón de cerrar a la izquierda).

Dec 17 '2012 15:12 Julien Kronegg