5

Deseo detectar cuando la persona abandone mi página web, ya sea cerrando la pestaña del navegador o cerrando completamente el navegador, detectar cuando abandona la página.

Esto porque deseo cerrar la transacción del tiempo que duró activa la sesión de usuario, por ahora funciona si el usuario usa los botones de cierre que tengo dentro de mi página web, pero si cierra abruptamente el aplicativo cerrando la pestaña o el navegador, nunca se cierra esa sesión que se activo para esa persona y pues por cuestiones ya de políticas del aplicativo, al volver a entrar es una nueva sesión que se crea para el usuario.

Es por esto que necesito una forma para poder detectar la salida del usuario.

He probado con las sentencias de onunload y onbeforeunload pero no funcionan.

Intenté con este código:

<HTML>
<HEAD>    
</HEAD>
<BODY onunload="confirm('Estas seguro de terminar la sesion')">
    <a href="http://www.google.com/;" mce_href="http://www.google.com/">Google</a>
</BODY>
</HTML>

Y también con este:

<HTML>
<HEAD>
<SCRIPT>
    function Cerrar() {
       console.log("Se va a cerrar la ventana");
       event.returnValue = "Te estás saliendo del sitio…";
    } 
</SCRIPT>
</HEAD>
<BODY onbeforeunload="return Cerrar()">
    <a href="http://www.google.com/;" mce_href="http://www.google.com/">Google</a>
</BODY>
</HTML>

Pero ninguno funciona, necesito algo donde no sé, pueda emitir una alerta para saber que el usuario va a cerrar la ventana...

Actualización

Acabo de probar un nuevo código del post https://stackoverflow.com/questions/1631959/how-to-capture-the-browser-window-close-event pero tampoco funciona, solo me detecta el F5 y pues ese no me hace falta, al igual que cuando pulso la X, me cierra la ventana sin emitir nada.

El código usado fue:

<HTML>
<HEAD>

</HEAD>
<BODY>
    <a href="http://www.google.com/;" mce_href="http://www.google.com/">Google</a>
</BODY>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var inFormOrLink;
    $('a').on('click', function() { inFormOrLink = true; });
    $('form').on('submit', function() { inFormOrLink = true; });

    $(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
    });
</script>
</HTML>

Solución

Usé la sentencia

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

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

A mi me funcionó, claro, la adapte para no emitir mensaje sino emitir la acción que deseaba

2

2 respuestas 2

4

Una posibilidad: Si quieres es detectar cuando el usuario salga de la ventana:

Ver Demo

function window_mouseout( obj, evt, fn ) {

    if ( obj.addEventListener ) {

        obj.addEventListener( evt, fn, false );
    }
    else if ( obj.attachEvent ) {

        obj.attachEvent( 'on' + evt, fn );
    }
}

window_mouseout( document, 'mouseout', event => {

    event = event ? event : window.event;

    var from         = event.relatedTarget || event.toElement;

    // Si quieres que solo salga una vez el mensaje borra lo comentado
    // y así se guarda en localStorage

    // let leftWindow   = localStorage.getItem( 'leftWindow' ) || false;

    if ( /* !leftWindow  && */ (!from || from.nodeName === 'HTML') ) {

        // Haz lo que quieras aquí
        alert( '¿Quieres abandonar mi página?' );
        // localStorage.setItem( 'leftWindow', true );
    }
} );

Edit: Para detectar si cierras el tab de la ventana:

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

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

Respuesta original - No lo he testeado en móvil u otros navegadores

3
  • Funcionaria si la pantalla del equipo que van a utilizar no fuera táctil, cuando es táctil pueden cerrar normal la página y nunca emite la alerta :( Commented el 21 sept. 2017 a las 15:39
  • @FabianMontoya - Prueba el código que puse para detectar los cierres de las ventas con tabs... Commented el 21 sept. 2017 a las 15:50
  • Adapté un poco el código para evitar generar el mensaje y enviar la solicitud inmediatamente para cerrar la sesión, gracias :D Commented el 21 sept. 2017 a las 18:47
2

Te falta hacer el return de la función a la que estas llamando cuando se ejecuta el evento:

<HTML>
<HEAD>
<SCRIPT>
    function Cerrar() {
    alert('Mensaje')
    return "Te estás saliendo del sitio…";
}
</SCRIPT>
</HEAD>
<BODY onbeforeunload="return Cerrar()">
    <a href="http://www.google.com/;" mce_href="http://www.google.com/">Google</a>
</BODY>
</HTML>

Espero te sirva, saludos !

3
  • Igual, solo me detecta el F5, no el cierre de la ventana mediante la X, además que me genera la alerta del cierre incluso cuando voy a redirigir a otra página. Commented el 21 sept. 2017 a las 15:14
  • Es extraño, cuando lo ejecuto me detecta hasta cuando voy a cerrar esta página, ahora si quieres evitar que aparezca el alert solo devuelve un return null dentro de la función Commented el 21 sept. 2017 a las 15:19
  • Si, pero el problema es que tampo me permite hacer redirecciones mediante js cuando uso window.location = "http://www.mipagina-2.com" tambien emite la alerta, recuerda que es para el cierre de sesión, no para que se mantengas en una página especifica Commented el 21 sept. 2017 a las 15:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.