javascript - salir - Identificación entre refrescar y cerrar acciones del navegador

evitar cerrar navegador javascript

Question

Cuando actualizamos la página (F5, o ícono en el navegador), primero activa el evento ONUNLOAD. Cuando cerremos el navegador (X en el icono superior derecho), se disparará el evento ONUNLOAD. Ahora cuando se activa el evento ONUNLOAD, no hay forma de distinguir entre actualizar la página o cerrar el navegador. Si tienes alguna solución, entonces dame.

Answer 1

Es una solución de trabajo

export class BootstrapComponent implements OnInit {

  validNavigation = 0;

  constructor(
    private auth: AuthenticationService
  ) { }

  ngOnInit() {
    const self = this;
    self.registerDOMEvents();
  }

  registerDOMEvents() {
    const self = this;
    window.addEventListener(''unload'', () => {
      if (self.validNavigation === 0) {
        self.endSession();
      }
    });
    document.addEventListener(''keydown'', (e) => {
      const key = e.which || e.keyCode;
      if (key === 116) {
        self.validNavigation = 1;
      }
    });
  }

  endSession() {
    const self = this;
    self.auth.clearStorage();
  }
}

Answer 2

Hay una solucion.

Quise desconectar al usuario en el servidor cuando se cerró la pestaña o la ventana del navegador, pero no cuando la página se recargó (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 onunload a la window al siguiente 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 una onload en el body al siguiente 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 establezca un hilo de temporizador que inspeccione la lista a intervalos regulares (utilicé cada 20 segundos). Una vez que se agota el tiempo de espera de la solicitud de desconexión (es decir, se han agotado los 5 segundos), desconecte al usuario del servidor. Si se recibe una cancelación de solicitud de desconexión mientras tanto, la solicitud de desconexión correspondiente se elimina de la lista, de modo que el usuario no se desconectará.

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

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

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

Otros enfoques basados ​​en event.clientY no son confiables porque este valor es negativo al hacer clic en los botones de recarga o cerrar ventana / ventana, y es positivo cuando se usan los atajos de teclado para volver a cargar (por ejemplo, F5, Ctrl-R, ...) y cierre de ventana (p. ej., Alt-F4). Depender de la posición X del evento tampoco es confiable porque los botones no se colocan en la misma posición en cada navegador (por ejemplo, botón de cerrar a la izquierda).

Answer 3

Hoy tuve el mismo problema y encontré una posible solución que quiero compartir contigo.

Al pensar en lo que podría ayudar a discernir entre la actualización y el cierre, las cookies vinieron a mi mente. Recuerdo que establecer una cookie sin una fecha de caducidad explícita, la hace disponible solo para la sesión actual. Y una sesión actual es claramente válida hasta que se cierre el navegador. Esto no incluye cerrar una pestaña, pero mi problema era sobre la autenticación del usuario y no quería cerrar la sesión del usuario solo por haber cerrado una pestaña (creo que es el mismo enfoque que la cookie ASPXAUTH de ASP.NET).

Así que puse una cookie simple en la colección document.cookies cuando el usuario inició sesión y la revisó al cargar la página: si la cookie todavía estaba allí, era una actualización o una pestaña reabierta y los datos del usuario se guardaban, si la cookie no estaba presente la sesión expiró, por lo que los datos del usuario se borraron (lo mismo que una desconexión explícita).

Espero que este enfoque pueda ser útil para otra persona.

Answer 4

Lamentablemente, inspeccionar el valor de clientY / pageY del evento, como lo sugieren algunas de las respuestas aquí, no es una forma confiable de determinar si el evento de unload se está produciendo como consecuencia de que el usuario cierre la página.

La razón por la que clientY / pageY es negativo cuando hace clic en el botón de cerrar del navegador es porque el botón de cerrar está arriba de la parte superior del documento (es decir, arriba del píxel 0), pero el botón de recarga también significa que al hacer clic en el botón un valor negativo para clientY / pageY .

Seguir el camino de inspección de la coordenada x del evento también es problemático porque el botón de cierre del navegador no está siempre en el lado derecho de la ventana (por ejemplo, está a la izquierda en OS X) y porque una ventana se puede cerrar cerrando su pestaña o mediante el teclado.

Answer 5

Lo intenté y resolvió el problema: crea un objeto sessionStorage que se destruirá cuando el usuario cierre el navegador. Podemos verificar el objeto sessionStorage para encontrar si el usuario ha cerrado el navegador o actualizado la página (el objeto sessionStorage no se destruirá al actualizar la página).

Answer 6

Mi solución anterior funcionó para mí en IE. window.event no estaría definido para navegadores que no sean IE ya que ''evento'' está definido globalmente en IE a diferencia de otros navegadores. Debería proporcionar evento como parámetro en el caso de otros navegadores. Además ese clientX no está definido para firefox, deberíamos usar pageX.

Intenta algo así ... debería funcionar para IE y Firefox esto ...

<html>
<body>
<script type="text/javascript">

window.onunload = function(e) {
// Firefox || IE
e = e || window.event;

var y = e.pageY || e.clientY;

if(y < 0)  alert("Window closed");
else alert("Window refreshed");

}
</script>
</body>
</html>

Answer 7

Use la ventana. Antes de descargar el evento para el caso, navegue fuera de la página, pero incluirá etiquetas refrescantes o de anclaje ... use un indicador de validación para el mismo, 1 ejemplo para el proceso es la verificación de URL (URL inicial = URL actual) ) o F5 comprueba utilizando el código clave para actualizar, en caso de etiquetas de anclaje utilice bind ()

Nota * El código clave puede causar problemas en el caso de Chrome.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>

<style type=''text/css''>
body {
    font-family: sans-serif;
}
</style>
<script src="jquery-1.9.1.js" type=''text/javascript''></script>
<script type=''text/javascript''>
var valid=false;
function wireUpEvents() {

if(valid){
alert("Page Refreshed or Redirected");
}else{

window.onbeforeunload = askWhetherToClose;

}
function askWhetherToClose(event) {

if(!valid){

    var msg;

    msg = "You''re leaving the page, do you really want to?";
    event = event || window.event;
    event.returnValue = msg;
    return msg;
}}
$(document).bind(''keypress'', function(e) { 
 if (e.keyCode == 116){ 

 // or you can insert some code to check page refresh
 valid = true; 

//wireUpEvents();
 } 
 }); 
 $("a").bind("click", function() {
//To check redirection using Anchor tags  
 valid = true; 
 //wireUpEvents();
 }); 
 }
$(document).ready(function() { 
 wireUpEvents(); 

 });
</script>
</head>
<body>
<p>Close the browser window, or navigate to <a href="http://.com"></a></p>
</body>
</html>

Answer 8

    $(window).bind(''unload'', function () {
        if (/Firefox[///s](/d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
            console.log(''firefox delete'');
            var data = { async: false };
            endSession(data);
            return null;
        }
        else {
            console.log(''NON-firefox delete'');
            var data = { async: true };
            endSession(data);
            return null;
        }
    });

    function endSession(data) {
        var id = 0

        if (window) { // closeed
            id=1
        }

        $.ajax({
            url: ''/api/commonAPI/''+id+''?Action=ForceEndSession'',
            type: "get",
            data: {},
            async: data.async,
            success: function () {
                console.log(''Forced End Session'');
            }
        });
    }

Use if (ventana) para determinar si está cerrado o simplemente vuelva a cargar. trabajando para mi

Answer 9

<html>
<body onunload="doUnload()">
<script>
   function doUnload(){
     if (window.event.clientX < 0 && window.event.clientY < 0){
       alert("Window closed");
     }
     else{
       alert("Window refreshed");
     }
   }
</script>
</body>
</html>