javascript - evitar - ¿Cómo puedo manejar el evento de cierre de la pestaña del navegador en Angular? Solo cerrar, no actualizar

onbeforeunload jquery

Question

Mi objetivo es eliminar las cookies de usuario cuando se cierra la pestaña del navegador.

¿Es posible? ¿Puedo manejar el evento de cierre de la pestaña del navegador sin actualizar el caso?

Si uso los eventos antes de unload o unload , la función se activa cuando el usuario actualiza la página, no quiero esto, solo quiero ejecutar cuando la pestaña está cerrada.

¿Cómo puedo hacer esto en angular?

Answer 1

Esto no es, trágicamente, un problema simple de resolver. Pero puede hacerse. La respuesta a continuación está amalgamada de muchas respuestas diferentes de SO.

Parte simple: saber que la ventana está siendo destruida. Puede utilizar el onunload evento onunload para detectar esto.

La parte difícil:

Detectando si se trata de una actualización, enlace de seguimiento o el evento de cierre de ventana deseado. Eliminar el enlace que sigue y el envío de formularios es bastante fácil:

var inFormOrLink;
$(''a'').live(''click'', function() { inFormOrLink = true; });
$(''form'').bind(''submit'', function() { inFormOrLink = true; });

$(window).bind(''beforeunload'', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
}); 

La solución del pobre

Verificando event.clientY o event.clientX para determinar en qué se hizo clic para event.clientX el evento.

function doUnload(){
 if (window.event.clientX < 0 && window.event.clientY < 0){
   alert("Window closed");
 }
 else{
   alert("Window refreshed");
 }
}

El eje Y no funciona porque es negativo para los clics de recarga o los botones de cierre de pestañas / ventanas, y es positivo cuando se utilizan los atajos de teclado para recargar (por ejemplo, F5, Ctrl-R, ...) y el cierre de ventanas (por ejemplo, Alt-F4 ). X-Axis no es útil, ya que los diferentes navegadores tienen ubicaciones de botones diferentes. Sin embargo, si está limitado, entonces la mejor opción es ejecutar las coordenadas del evento a través de una serie de if-elses. Ten en cuenta que esto ciertamente no es confiable.

Solución involucrada

(Tomado de Julien Kronegg ) Uso del almacenamiento local HTML5 y la comunicación AJAX cliente / servidor. Advertencia: este enfoque se limita a los navegadores que admiten el almacenamiento local HTML5.

En su página, agregue una onunload en la ventana al siguiente controlador

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
}

A continuación, agregue un onloadon el cuerpo al siguiente controlador

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
        }
    }
} 

En el servidor, recopile las solicitudes de desconexión en una lista y establezca un subproceso de temporizador que inspeccione la lista a intervalos regulares (utilicé cada 20 segundos). Una vez que se agote el tiempo de espera de una solicitud de desconexión (es decir, que hayan transcurrido los 5 segundos), desconecte al usuario del servidor. Si, mientras tanto, se recibe una cancelación de la solicitud de desconexión, la solicitud de desconexión correspondiente se elimina de la lista para que el usuario no se desconecte.

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

Comentarios de cierre (juego de palabras destinado):

Dado que desea eliminar las cookies cuando la ventana está cerrada, asumo que es para evitar que se utilicen en una sesión futura. Si esa es una suposición correcta, el enfoque descrito anteriormente funcionará bien. Mantiene la cookie invalidada en el servidor (una vez que el cliente se desconecta), cuando el cliente crea una nueva sesión, el JS enviará la cookie de forma predeterminada, en cuyo momento sabe que es de una sesión anterior, elimínela y, opcionalmente, proporcione una Una nueva que se establecerá en el cliente.

Answer 2

Quizás este enlace te ayude a http://eureka.ykyuen.info/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/

Answer 3

Sé que ha pasado un tiempo desde que se hizo esta pregunta, pero pensé que también contribuiría con mi respuesta. La mejor manera que encontré para volver a cargar la página sin perder cookies, y eliminar las cookies en la ventana o pestaña cerrada fue usar ng-keydown para ver la pulsación de tecla F5 (KeyCode 116).

HTML

<body ng-controller="exitController" ng-keydown="isRefresh($event)">

CONTROLADOR

yourApp.controller(''exitController'', [''$rootScope'', ''$scope'', ''$window'', ''$cookies'', function($rootScope, $scope, $window, $cookies) {
//set refresh to false to start out, it will become true only when we hit the refresh page
$scope.refresh = false;

//This is where we''ll actually clear our cookies in the event of a window close
$scope.clearCookies = function() {
    $cookies.remove(''sessionData'');
    $cookies.remove(''ss-id'');
    $cookies.remove(''ss-pid'');
};

//When the user types any key, it will be assessed.
$scope.isRefresh = function(e) {
    var keyCode = e.keyCode; //find the key that was just pressed
    if(keyCode === 116) { //if the key that was pressed is F5, then we know it was a refresh
        $scope.refresh = true;
    }
}

//event that handles all refresh requests
window.onbeforeunload = function (e) {
    if (!$scope.refresh) { //as long as the trigger for the refresh wasnt initiated by F5, we remove the cookies
        $scope.clearCookies();
    }
};

}]);

Answer 4

Si su objetivo es eliminar las cookies cuando el navegador está cerrado, no establezca la caducidad. Las cookies sin vencimiento se eliminan cuando el navegador se cierra.

Realmente nunca debería necesitar saber si un usuario cierra su navegador o no. Estoy seguro de que hay formas alternativas de lograr lo que sea que quieras hacer.

La línea de fondo:

Si un visitante ya no está en su página, realmente no es de su incumbencia lo que el usuario está haciendo con su navegador o su computadora. Por lo tanto, la detección del cierre del navegador probablemente nunca se implementará sin algún tipo de aceptación por parte del usuario, por ejemplo, extensiones / complementos del navegador.

Answer 5

$window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "/o/";
  console.log("closing the tab so do your small interval actions here like cookie removal etc but you cannot stop customer from closing");
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

Esto se debate bastante sobre si podemos hacerlo o no de una manera infalible. Pero técnicamente no se pueden hacer muchas cosas aquí, ya que el tiempo que tiene es bastante menor y si el cliente lo cierra antes de que sus acciones se completen, está en problemas y está completamente a merced del cliente. No te olvides de inyectar $ ventana. Aconsejo no depender de ello.

javascript detectar navegador cerrar pestaña / cerrar navegador

Actualización: estaba investigando este problema junto con algunas recomendaciones. Y aparte de esta opción anterior, la mejor manera de manejar estos casos es mediante la creación de sesiones sin tiempo de espera de actividad que puede ser de 25 a 30 minutos. Convierta todas las cookies que deben destruirse en sesiones con tiempo de espera. Alternativamente, puede establecer la caducidad de la cookie, pero la cookie permanece en el navegador hasta el próximo inicio de sesión. Menos de 25-30 minutos de inactividad de la sesión no es completamente confiable, ya que puede desconectarse si el cliente no está usando el navegador durante 10-15 minutos. Incluso probé los eventos de captura desde el enlace (<a>) o (< submit >) o ( keypress ) eventos basados. El problema es que maneja bien la actualización de la página. Pero no elimina el problema de que el cliente cierre el navegador o la pestaña del navegador antes de que se eliminen las cookies. Es algo que debe tener en cuenta en su caso de uso y cambiarse enérgicamente debido a que no tiene control sobre él. Es mejor cambiar el diseño de su dependencia a una mejor arquitectura que enfrentar los problemas mencionados más adelante.