Abandono de página con HTML5

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.

Controlando el evento beforeunload

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.

Usando addEventListener

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('beforeunload', function(event) {
  // Código de control
});

Pasando parámetros al método

Al método .addEventListener() le vamos a pasar el nombre del evento y la función que lo controle.

window.addEventListener('beforeunload', handleBeforeUnload);

Implementando la función de control

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().

window.addEventListener('beforeunload', function(event) {
  document.getElementById('mensaje').innerHTML = 'Vas a abandonar la página';
});

Código completo

Además, 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(event) {
  document.getElementById('mensaje').innerHTML = 'Vas a abandonar la página';
  event.returnValue = null;
  return null;
});

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.