Jun 132013
 
Artículo Javascript

En ocasiones, puede ser necesario realizar algún tipo de proceso cuando un usuario decide abandonar una de las páginas de nuestro sitio web. Por ejemplo, la página puede contener un formulario en el que el usuario ha realizado modificaciones. En este caso, es deseable presentar un aviso para preguntar al usuario si desea guardar las modificaciones, o descartarlas.

En este artículo explicamos la manera de capturar y procesar el evento de abandono de página mediante javascript.

Para ello, en el evento “onload” del documento ejecutamos una función “setAbandon” que asigna un manejador de evento al evento “onbeforeunload”:

En el código HTML, definimos la función de manejo del evento “onload” en el tag “<body>”:

<body onLoad="setAbandon();">

En la función setAbandon, asignamos el manejador del evento unload:

function setAbandon() {
    window.onbeforeunload = function (e) {
        // Post to record the page unload
        post_to_url("/pageAbandon.php");
    };
}

El manejador del evento unload, en este caso, realiza simplemente una llamada a una función “post_to_url”, que realiza una solicitud POST a la página “pageAbandon.php” del servidor. También podría presentar un popup de aviso, o realizar cualquier otra función que quisieramos implementar.

En nuestro caso, la función post_url puede ser implementada de la siguiente forma, que admite el envío de parámetros junto con la solicitud:

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

De la misma forma, tenemos libertad para implementar la funcionalidad que deseemos en la página “pageAbandon.php”. Por ejemplo, podríamos almacenar en una base de datos los parámetros recibidos, etc.

 

Referencias:

 Publicado por en 8:19 am

 Deja un comentario

(requerido)

(requerido)