En este artículo vamos a ver cómo podemos controlar el abandono de página con HTML5. La idea es que tenemos a un usuario en nuestra página y este está, por ejemplo, insertando datos en un formulario. En esta situación será bueno indicarle que está insertando información y que si abandona la página perderá lo que ha insertado.
Este comportamiento de control de abandono lo podemos gestionar si controlamos el evento beforeunload de HTML5. Así que recurriremos al lenguaje Javascript para controlar la ejecución de dicho método. En concreto nos apoyaremos en el método .addEventListener() para realizar esta acción.
En concreto vamos a utilizar el método .addEventListener() sobre la ventana del navegador.
window.addEventListener();
Al método .addEventListener() le vamos a pasar el nombre del evento y la función que lo controle.
window.addEventListener("beforeunload",function(e){});
Vemos que en el caso de la función que va a dar respuesta al evento utilizamos una función anónima que vamos a codificar. Además está función recibe como parámetro un evento con la información, de entre otras cosas, del elemento origen del evento.
Es importante saber que cuando controlamos el evento beforeunload el propio navegador va a mostrar un mensaje. Es por ello que en nuestro caso vamos a dejar un mensaje sobre una capa de la página mediante el método .getElementById().
document.getElementById("mensaje").innerHTML = "Si se va no se guardarán los datos";
Ademas, para que funcione correctamente deberemos de devolver el valor null, tanto en el atributo .returnValue del evento como de la función anónima.
De esta manera el código que nos controla el evento beforeunload nos quedará de la siguiente manera:
window.addEventListener("beforeunload",function(e){
document.getElementById("mensaje").innerHTML = "Si se va no se guardarán los datos";
(e || window.event).returnValue = null;
return null;
},true);
De esta forma ya tendremos controlado el abandono de página con HTML5 para poder avisar al usuario de que va a salir de la página.
