2010-10-08 23 views
182

¿Hay algún código JavaScript/jQuery entre navegadores para detectar si se está cerrando el navegador o una pestaña del navegador, pero no debido a que se haga clic en un enlace?Detectar navegador o pestaña cerrando

+1

Véase mi respuesta a esta pregunta: http://stackoverflow.com/questions/3735198/is-it-possible-to-add-a-browser-code-in-javascript/3735851#3735851 – Nivas

+0

¡Puedes! http://stackoverflow.com/questions/42706209/net-core-cookies-authentication-on-browser-close/42706331#42706331 –

Respuesta

183

Si lo obtengo correctamente, quiere saber cuándo se cierra efectivamente una pestaña/ventana. Bueno, AFAIK es la única manera en Javascript para detectar ese tipo de cosas onunload & onbeforeunload eventos.

Desafortunadamente (¿o afortunadamente?), Esos eventos también se desencadenan cuando abandonas un sitio a través de un link o el botón Atrás de tus navegadores. Así que esta es la mejor respuesta que puedo dar, no creo que puedas detectar de forma nativa un close puro en Javascript. Corrígeme si me equivoco aquí.

+23

correcta. Solo puede detectar cuándo la página está descargada, no cuando la ventana está cerrada. Además, el onbeforeunload no es estándar, por lo que no es compatible con todos los navegadores. – Guffa

+6

Quería usar también la característica 'al cerrar', pero noté que mis usuarios ocasionalmente actualizarían la pantalla presionando F5. Dado que mis controladores 'de cierre' se invocan en dicha actualización, esto significa que no puedo usarlo de la manera que lo necesitaba (que era una verdadera 'pestaña o ventana cerrada') ... Maldita sea, necesitamos un nuevo modelo de evento por todo esto! – Jeach

+1

Esto funciona para mí. Sin embargo, mi problema es un poco más complicado. Estoy tratando de pasar los parámetros a un método que asigné antes de descargar del código subyacente. ¿Podría alguien pasar por http://stackoverflow.com/questions/28305430/send-parameters-to-window-onbeforeunload-from-codebehind y pesar? – Jeremy

13
<body onbeforeunload="ConfirmClose()" onunload="HandleOnClose()"> 

var myclose = false; 

function ConfirmClose() 
{ 
    if (event.clientY < 0) 
    { 
     event.returnValue = 'You have closed the browser. Do you want to logout from your application?'; 
     setTimeout('myclose=false',10); 
     myclose=true; 
    } 
} 

function HandleOnClose() 
{ 
    if (myclose==true) 
    { 
     //the url of your logout page which invalidate session on logout 
     location.replace('/contextpath/j_spring_security_logout') ; 
    } 
} 

// Este es trabajar en IE7, si está o pestaña del navegador cierre con una sola pestaña

+1

ya. pero para múltiples pestañas como ie8, firefox. hay un problema al usar esto? – cometta

+0

Resulta que el uso de este código en IE9 hará que aparezca este mensaje cuando el usuario haga clic en los botones Atrás, Adelante o Actualizar con su mouse. –

+0

Solo un aviso que implementamos una solución similar en 2007. Esta solución ya no funciona en IE9 desde hace aproximadamente una semana. Dejó de funcionar (o posiblemente nunca funcionó) en navegadores con pestañas hace mucho tiempo. – tjfo

2
$(window).unload(function() { alert("Bye now!"); }); 
+7

Esto no funcionará en Firefox o Chrome. Pruebe 'beforeunload' si desea mostrar una alerta. De esta manera: '$ (ventana) .on ('beforeunload', function() {alert ('Bye now')});' – AdrianoRR

+5

según jQuery docs "La mayoría de los navegadores ignorarán las llamadas a alert(), confirm() y prompt() "https://api.jquery.com/unload/ – katzmopolitan

0
window.onbeforeunload = function() { 
    console.log('event'); 
    return false; //here also can be string, that will be shown to the user 
} 
+1

' aquí también puede ser una cadena, que se mostrará al usuario' no, en firefox, sí lo hace en Chrome, sin embargo ... – TrySpace

87

De Firefox Documentation

por algunas razones, los navegadores basados ​​en WebKit no sigas las especificaciones para el cuadro de diálogo. Un ejemplo casi de trabajo cruzado sería cercano al siguiente ejemplo.

window.addEventListener("beforeunload", function (e) { 
    var confirmationMessage = "\o/"; 

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE 
    return confirmationMessage;       //Webkit, Safari, Chrome 
}); 

Este ejemplo sirve para todos los navegadores.

+2

Esto es la única solución que funcionó para mi navegador Chrome. No intenté con otros. –

+3

sí, intento muchas soluciones y vengo con esto al final, combinación para mejores respuestas, y lo pruebo en todos los navegadores. –

+1

Este método no funciona perfectamente en el cierre de pestañas mientras se usa Firefox (> = ver. 44) con solo la pestaña abierta. – Rajkishore

0

intente esto, Estoy seguro de que esto funcionará para usted.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type='text/javascript'> 
    $(function() { 

     try{ 
      opera.setOverrideHistoryNavigationMode('compatible'); 
      history.navigationMode = 'compatible'; 
     }catch(e){} 

     function ReturnMessage() 
     { 
      return "wait"; 
     } 

     function UnBindWindow() 
     { 
      $(window).unbind('beforeunload', ReturnMessage); 
     } 

     $(window).bind('beforeunload',ReturnMessage); 
    }); 
</script> 
34

solución simple

window.onbeforeunload = function() { 
    return "Do you really want to close?"; 
}; 
+1

solución muy simple y limpia. (y) –

+3

¿Qué tipo de hechicería es esta? (y) funciona en todos los navegadores? funciona muy bien en Chrome –

+1

que se dispara cuando actualiza la página. ese es mi único problema – leowebguy

5

Lo siento, no fue capaz de añadir un comentario a una de las respuestas existentes, pero en caso de que quería poner en práctica una especie de advertencia de diálogo, sólo quería mencionar que cualquier función de controlador de eventos tiene un argumento - evento. En su caso, puede llamar a event.preventDefault() para no permitir que salga la página automáticamente, luego emita su propio cuadro de diálogo. Considero que esta es una opción mucho mejor que usar la alerta estándar fea e insegura(). Personalmente implementé mi propio conjunto de cuadros de diálogo basados ​​en el objeto kendoWindow (Telerik's Kendo UI, que es casi de código abierto, excepto kendoGrid y kendoEditor). También puede usar cuadros de diálogo de jQuery UI. Sin embargo, tenga en cuenta que estos elementos son asincrónicos, y deberá vincular un controlador al evento onclick de cada botón, pero esto es bastante fácil de implementar.

Sin embargo, estoy de acuerdo en que la falta del verdadero evento cercano es terrible: si, por ejemplo, desea restablecer el estado de la sesión en el back-end solo en caso de cierre real, es un problema.

-2
<script type="text/javascript" language="Javascript"> 

function DetectBrowserExit() 
{ 
    alert('Execute task which do you want before exit'); 
} 

window.onbeforeunload = function(){ DetectBrowserExit(); } 

</script> 

He probado este script en los siguientes navegadores Web: Por el momento, el navegador web Opera no es compatible con el evento onBeforeUnload. Internet Explorer Mozilla Firefox Google Chrome Safari

+0

, ya que también se activa cuando navega a un enlace en la página. – ElHaix

+0

es la misma respuesta que todos los demás publicados hace años ... –

0
window.onbeforeunload = function() 
{  

    if (isProcess > 0) 
    { 
     return true;  
    } 

    else 
    { 
     //do something  
    } 
}; 

Esta función muestra un cuadro de diálogo de confirmación si cierra la ventana o actualización de la página durante cualquier proceso de trabajo en función de browser.This en toda browsers.You tiene que fijar isProcess var en su proceso de ajax.

-1

probar esto. Funcionará. El método de descarga jquery está depreciado.

window.onbeforeunload = function(event) { 
    event.returnValue = "Write something clever here.."; 
}; 
1

no hay ningún evento, pero no es una propiedad window.closed que está disponible en todos los principales navegadores como del momento de escribir esto. Por lo tanto, si realmente necesita saber, puede sondear la ventana para verificar esa propiedad.

if(myWindow.closed){do things}

Nota: sondeo nada por lo general no es la mejor solución. El evento window.onbeforeunload se debe usar si es posible, la única advertencia es que también se dispara si se va.

0
window.addEventListener("beforeunload", function (e) { 
var confirmationMessage = "tab close"; 

(e || window.event).returnValue = confirmationMessage;  //Gecko + IE 
sendkeylog(confirmationMessage); 
return confirmationMessage;        //Webkit, Safari, Chrome etc. 
}); 
+0

En realidad, quería mostrar el mensaje de confirmación si el usuario cierra la pestaña SOLAMENTE. Esto es trabajo para mí. Pero estoy enfrentando un problema que, si hago clic en cualquier enlace de la misma página, también aparece el mensaje de confirmación. Para más información, consulte: https://www.w3schools.com/code/tryit.asp?filename=FEK2KWUN9R8Z @Tunaki – Mohammed

3

Necesito registrar automáticamente al usuario cuando se cierra el navegador o la pestaña, pero no cuando el usuario navega a otros enlaces. Tampoco quería que se mostrara un mensaje de confirmación cuando eso sucediera. Después de luchar con esto durante un tiempo, especialmente con IE y Edge, esto es lo que terminé haciendo (comprobado que trabaja con IE 11, Edge, Chrome y Firefox) después basando fuera del enfoque por this answer.

En primer lugar, iniciar un temporizador de cuenta atrás en el servidor en el controlador beforeunload evento en JS. Las llamadas ajax deben ser sincrónicas para que IE y Edge funcionen correctamente. También es necesario utilizar return; para evitar que el diálogo de confirmación de mostrar como esto:

window.addEventListener("beforeunload", function (e) {   
     $.ajax({ 
      type: "POST", 
      url: startTimerUrl, 
      async: false   
     }); 
     return; 
    }); 

Inicio del temporizador establece el indicador cancelLogout a falsa. Si el usuario actualiza la página o navega a otro enlace interno, la bandera cancelLogout en el servidor se establece en verdadera . Una vez que el evento del temporizador transcurre, comprueba el indicador cancelLogout para ver si el evento de cierre de sesión se ha cancelado. Si el temporizador ha sido cancelado, entonces detendría el temporizador. Si el navegador o pestaña se cerró, entonces la bandera cancelLogout permanecería falsa y el controlador de eventos podría conectar al usuario a cabo.

Aplicación nota: estoy usando ASP.NET MVC 5 y estoy cancelando cierre de sesión en un método reemplazado Controller.OnActionExecuted().

0

he encontrado una manera, que obras en todos mis navegadores.

Probado en las siguientes versiones: Firefox 57, Internet Explorer 11, Edge 41, uno de los latested Chrome (no se mostrará mi versión)

Nota: incendios onbeforeunload si se deja la página de cualquier manera posible (actualizar, cerrar el navegador, redirigir, vincular, enviar ...). Si solo quiere que suceda al cerrar el navegador, simplemente vincule los manejadores de eventos.

$(document).ready(function(){   

     var validNavigation = false; 

     // Attach the event keypress to exclude the F5 refresh (includes normal refresh) 
     $(document).bind('keypress', function(e) { 
      if (e.keyCode == 116){ 
       validNavigation = true; 
      } 
     }); 

     // Attach the event click for all links in the page 
     $("a").bind("click", function() { 
      validNavigation = true; 
     }); 

     // Attach the event submit for all forms in the page 
     $("form").bind("submit", function() { 
      validNavigation = true; 
     }); 

     // Attach the event click for all inputs in the page 
     $("input[type=submit]").bind("click", function() { 
      validNavigation = true; 
     }); 

     window.onbeforeunload = function() {     
      if (!validNavigation) {  
       // -------> code comes here 
      } 
     }; 

    }); 
Cuestiones relacionadas