Ejecutar funcion JS al cerrar ventana HTML

[Raditz99]

Hola a todos...

Como puedo ejecutar una funcion JS en el momento que presiono la "X" (Cerrar) en el Explorador Web.

Lo que quiero exactamente es registrar en mi BD la hora exacta en que el boton "X" se presiona, o sea el momento en el que se cierra una Sesion.

He probado con las funciones "onunload", "onbeforeunload" pero no funciona.

Gracias por la ayuda!!!

[prueba230683]

Existe un API llamado Beacon, que te permite enviar información via POST justo antes de que el usuario abandone el sitio web. Por ejemplo:

Código Javascript:

window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;
 
  var url = "/analytics"; // la ruta de tu endpoint
 
  var data = "location=" + encodeURIComponent(location.href) + "&ts=" + Date.now();
 
  navigator.sendBeacon(url, data);
};
 

Esto te envía via POST a /analytics los parámetros location (con la rula del sitio) y ts (con el timestamp) para trackear la actividad del usuario. Puedes añadir todos los parámetros que quieras, es una petición http normal.

[haggenx]

Iniciado por prueba230683

Existe un API llamado Beacon, que te permite enviar información via POST justo antes de que el usuario abandone el sitio web.

Interesante.

[haggenx]

Iniciado por Raditz99

Hola a todos...

Como puedo ejecutar una funcion JS en el momento que presiono la "X" (Cerrar) en el Explorador Web.

Lo que quiero exactamente es registrar en mi BD la hora exacta en que el boton "X" se presiona, o sea el momento en el que se cierra una Sesion.

He probado con las funciones "onunload", "onbeforeunload" pero no funciona.

Gracias por la ayuda!!!

Este script te permite detectar el cierre de una ventana popup, solo debes abrir la pagina que quieras (en un popup, aunque si le quitas todos los parametros de ancho, alto, etc se te abre como una pestaña nueva en Chrome) mediante la función openwindow y en detectpopupcloseevent pones lo que quieras que haga al cerrarse esa ventana.

Código:

<script language="javascript">

var popUp;

function detectpopupcloseevent()
{
                    
  if(!popUp.closed)
    window.setTimeout("detectpopupcloseevent();", 100);
  else
    alert("he cerrado la ventana");

}

function openwindow(url, winid)
{

  try
  {
    
    popUp = window.open(url,winid,'status=0,toolbar=0,width=495,height=666,resizable=0,menubar=0,location=0,directories=0');
    detectpopupcloseevent();
        
  }
  catch(e)
  {
    alert("Popup blocker detected!" + e.toString());
  }

}

</script>

[Raditz99]

Iniciado por prueba230683

Existe un API llamado [URL="https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API"]Beacon[/URL], que te permite enviar información via POST justo antes de que el usuario abandone el sitio web. Por ejemplo:

Código Javascript:

window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;
 
  var url = "/analytics"; // la ruta de tu endpoint
 
  var data = "location=" + encodeURIComponent(location.href) + "&ts=" + Date.now();
 
  navigator.sendBeacon(url, data);
};
 

Esto te envía via POST a /analytics los parámetros location (con la rula del sitio) y ts (con el timestamp) para trackear la actividad del usuario. Puedes añadir todos los parámetros que quieras, es una petición http normal.

Como podría ejecutar la función JS usando la API Beacon que hace un llamado a un archivo PHP que se encarga de hacer el insert en la BD?

[prueba230683]

Pon en la variable url la ruta hacia tu fichero PHP. Luego, en la variable data incluyes los parámetros que quieras pasar a dicho PHP cuando el usuario abandone la página.

[Raditz99]

Sigue sin funcionar, no se hace el Update en la BD, aqui dejo mi codigo... Ojala puedan ayudarme:

Código Javascript:

window.onunload = function analytics(event) {
    if (!navigator.sendBeacon)
        return;
 
    var cadena = document.getElementById("codUsuario").value; //Capturo el codUsuario para buscarlo luego en la BD y hacer el UPDATE
    //alert(cadena);
    var url = ".lib/link/linkIndex.php"; //Ruta del PHP para que haga el UPDATE
    var data = "cerrarSesion=" + cadena; // $_POST['cerrarSesion'] = 'codUsuario'
    //alert(url + "|" + data);
    navigator.sendBeacon(url, data);
};
 

[prueba230683]

Resulta que esta función envía la información via POST en formato text/plain, y PHP no es capaz de procesar este formato directamente (no se puede acceder desde $_POST). Para que se envíe en formato application/x-www-form-urlencoded, que sí es parseado por PHP, se debe hacer un pequeño cambio:

Código Javascript:

window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;
 
  var url = "/analytics"; // la ruta de tu endpoint
 
  var data = "location=" + encodeURIComponent(location.href) + "&ts=" + Date.now();
 
  navigator.sendBeacon(url, new URLSearchParams(data));
};
 

y en tu caso

Código Javascript:

window.onunload = function analytics(event) {
    if (!navigator.sendBeacon)
        return;
 
    var cadena = document.getElementById("codUsuario").value; //Capturo el codUsuario para buscarlo luego en la BD y hacer el UPDATE
    //alert(cadena);
    var url = ".lib/link/linkIndex.php"; //Ruta del PHP para que haga el UPDATE
    var data = "cerrarSesion=" + cadena; // $_POST['cerrarSesion'] = 'codUsuario'
    //alert(url + "|" + data);
    navigator.sendBeacon(url, new URLSearchParams(data));
};