Scriptia. Javascript y buenas prácticas en español

onbeforeunload: tiende una mano al usuario

Saltar a Anotaciones relacionadas

¿Alguna vez has cerrado una ventana cuando tenías un formulario a medio rellenar? ¿Has invertido media hora en escribir un email y, por error, has abandonado la página sin enviarlo? Evita a tus usuarios pasar por este trauma –y el de aprender hebreo– usando onbeforeunload.

onbeforeunload se dispara antes de que se descargue el contenido actual de la ventana. Microsoft lo introdujo en nuestras vidas y páginas web junto con la versión 4.0 de Internet Explorer. Los desarrolladores de Mozilla tuvieron en cuenta la utilidad de este evento –a pesar de no estar definido por ningún estándar–, así que desde la versión 1.7 de Mozilla (1.0 en términos firefoxísticos) podemos usarlo también en navegadores Gecko.

Lo curioso es que el manejo de este evento es distinto del habitual. Para cancelar la descarga –o mejor dicho, para preguntarle al usuario si está seguro de que quiere abandonar la página– el manejador del evento debe devolver una cadena.

Un ejemplito:

window.onbeforeunload = function(e) {
    return "Todavía no has guardado los datos. Si abandonas la página, se perderán por siempre jamás.";
};

Presentará un cuadro de diálogo al usuario en el que se mostrará el texto indicado, adornado convenientemente. Algo así:

¿Está seguro de que quiere abandonar esta página?

Todavía no has guardado los datos. Si abandonas la página, se perderán por siempre jamás.

Pulse Aceptar para continuar, o Cancelar para continuar en la página actual.

Botón aceptar / botón cancelar

(Los extras que incluye el navegador en el diálogo no se pueden eliminar. Ni falta que hace.)

Evidentemente, si no hay riesgo para el usuario (pérdida de datos), es innecesario mostrar el diálogo. Podemos recurrir a una variable bandera, a una función, a lo que sea. Sin miedo:

window.onbeforeunload = function(e) {
    if (seHaModificadoElFormularioPeroNoSeHaGuardadoEntodavia()) {
        return "Todavía no has guardado los datos. Si abandonas la página, se perderán por siempre jamás.";
    }
};

Para usuarios de jQuery

Ojito cuidadín: decíamos más arriba que este evento no funciona como es habitual. Si usas jQuery, deberás tocar el atributo returnValue del objeto que representa al evento:

$(window).bind("beforeunload", function(e) {
    if (seHaModificadoElFormularioPeroNoSeHaGuardadoEntodavia()) {
        e.returnValue = "Todavía no has guardado los datos, etcétera."
    }
});

En resumen, podemos usar onbeforeunload para ofrecer un seguro extra al usuario, pero siempre teniendo en cuenta que hay cienes y cienes de navegadores que no saben qué hacer con él.

Aclaro, a petición de are, que los navegadores que «no saben qué hacer con él» simplemente ignorarán la asignación del evento. En ningún caso se darán errores por tratar de usar onbeforeunload en navegadores que no lo soportan. Simplemente, sus usuarios no dispondrán de esa «red de seguridad».