0

Estoy creando un sitio web, donde estoy utilizando sesiones, tengo una tabla llamada usuarios, lo que quiero es que al momento de cerrar el navegador me detecte un evento con JS y ese evento mande un POST a mi PHP y actualizando mi tabla usuarios específicamente en la columna estatus. Eh logrado lo anterior pero me di cuenta que al recargar la pagina de igual manera el evento me lo detecta, estoy utilizando AJAX para llamar esa petición, se que puedo utilizar un cronometro de inactividad y cierre sesión, pero lo que se requiere es la sesión sea cerrada al inmediatamente cerrar el navegador. Cualquier sugerencia es aceptada y agradecida.

Este es mi código:

      <?php 
    //session_start();
    $connection = new swag();
        if(!isset($_SESSION["id_user"])){ 
            echo"<script>location.href='index.php';</script>";  
        } ?>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="shortcut icon" href="imgs/icon/favicon.ico">
        <title>PAGINA</title>
        <link href="font-awesome/css/all.min.css" rel="stylesheet"> 
    </head>
    <body id="principal" >
    
    
    <script language="javascript">
      function cerrarSesion(){
         $.ajax({
            type: 'post',
             url: 'logout.php',
           });
      }
    </script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>  
    <script src="js/utiles.js"></script>
    </body>
    </html>
   

CODIGO ACTUALIZADO:
 Encontre la forma en la cual ya no detectara al recargar la pagina, solamente hay un problema, me funciona con F5 o Ctrl+R, pero al recargar desde el botón del navegador si me detecta la función ajax- ¿Saben como lo puedo resolver? Se los agradezco. Este es mi codigo:


      <?php 
//session_start();
$connection = new swag();
    if(!isset($_SESSION["id_user"])){ 
        echo"<script>location.href='index.php';</script>";  
    } ?>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="shortcut icon" href="imgs/icon/favicon.ico">
        <title>PAGINA</title>
        <link href="font-awesome/css/all.min.css" rel="stylesheet"> 
    </head>
    <body onUnload="cerrarSesion()" id="principal" >
    
    
    <script type="text/javascript">

     $(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;
        }); 
        $(document).keydown(function(e) {
        if (e.keyCode == 65 && e.ctrlKey) {
                      validNavigation = true;
        }
    });

        $(document).keydown(function(e) {
                 if (e.keyCode == 65+17 && e.ctrlKey) {
             validNavigation = true;
                    }
                });
                        $(document).keydown(function (e) {            
                        if (e.key=="F5") {
                              validNavigation = true;
                        }
                        else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
                              validNavigation = true;
                        }
                        else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
                              validNavigation = true;
                        }
                         else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
                        window.onbeforeunload = ConfirmLeave;
                         }
                    });
                       
        window.onbeforeunload = function() {                
            if (!validNavigation) {   
                       $.ajax({
                            type: 'post',
                             url: 'logout.php',
                           });            
                     }else{

                     }
        };


  });
        
    </script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>  
    <script src="js/utiles.js"></script>
    </body>
    </html>

 
2
  • Para manejar las sesiones puedes usar sessionstorage o localstorage el 19 ago. 2021 a las 9:46
  • El problema es realizar una petición ajax en el evento, a lo navegadores no les acaba de gustar, ya que como es asíncrona se cierra el proceso antes de acabar la llamada. Mira a ver sendBeacon alternativamente Ajax en unload
    – ivanph
    el 19 ago. 2021 a las 12:18

3 respuestas 3

0

Prueba con esto, quizas te sirva

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hola mundo
  </body>
  <script>
    function confirmExit() {
      console.log('Hacer esto antes de cerrar');
      return 'You have attempted to leave this page. Are you sure?';
    }
    window.onbeforeunload = confirmExit;
  </script>
</html>

En el tiempo que la persona confirma el diálogo de cerrado, tú ya enviaste la petición.

Suerte

1
  • Gracias por tu respuesta, lo estuve probando pero no me funciono a mi, actualice la pregunte, encontré una manera de hacerlo, pero hay un problema, al recargar la pagina desde el botón del navegador me detecta el evento. Puedes ver si pregunta actualizada. el 19 ago. 2021 a las 16:10
0

Estaba investigando algo parecido y di con esto que a mi me funciono para mi objetivo, espero que para ti tambien!

<!DOCTYPE html>
<html lang="en">

<head>
  <script type="text/javascript">
    window.onbeforeunload = function(e) {
      var e = e || window.event;
      if (e) {
        e.returnValue = 'Se perderan todos los datos que no hayas guardado';
      }
    }
  </script>
  <meta charset="UTF-8">
  <title>Detectar navegador cerrado</title>
</head>

<body>
  <h1>Pulsa el boton cerrar - ALT + F4 - Archivo - Cerrar </h1>

</body>

</html>

1
  • Gracias por tu respuesta, lo estuve probando pero no me funciono a mi, actualice la pregunte, encontré una manera de hacerlo, pero hay un problema, al recargar la pagina desde el botón del navegador me detecta el evento. Puedes ver si pregunta actualizada. el 19 ago. 2021 a las 16:10
-1

Puedes usar el evento beforeunload en JavaScript para detectar cuando un usuario intenta cerrar la página o cambiar de página. Aquí hay un ejemplo de código:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "Estás seguro de querer salir?";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

Nota: este evento muestra un mensaje de confirmación al usuario antes de que la página se cierre. El usuario puede elegir cancelar la acción y permanecer en la página o confirmar la acción y cerrar la página.

Tu Respuesta

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

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