«
»

Protegir pàgines amb l’event onbeforeunload

No us ha passat mai que mentre esteu acabant d’omplir un formulari, sense adonar-vos, feu clic allà on no toca i perdeu tot el que heu introduït? Doncs bé, hi ha una senzilla manera per evitar al màxim aquests errors: l’event onbeforeunload.

Cap allà als mitjans dels noranta, Internet Explorer 4.0 introduí aquest event no estàndard, però a diferència d’altres ocasions, aquest cop feu una cosa útil i els navegadors amb motor Gecko ho acabaren introduint a la versió 1.7 de Mozilla (Firefox 1.0).

Aquest event, tal i com resa el seu nom, es dispara just abans de l’event onunload, és a dir, abans que es descarregui el contingut actual de la pàgina, i per tant, ens permet executar algun tipus d’acció en aquest moment.

A diferència dels altres events, aquest funciona força diferent: per tal de mostrar un missatge a l’usuari abans de descarregar la pàgina, el que cal fer és retornar una cadena amb el missatge que es vulgui mostrar. Un exemple podria ser:


window.onbeforeunload = function(e) {
  return "No heu enviat el formulari. Si tanqueu la pàgina perdreu tots els canvis fets fins ara.";
}

Així, en cas d’abandonar la pàgina, se’ns mostraria un quadre amb el missatge:

Esteu segur que voleu sortir d’aquesta pàgina?

No heu enviat el formulari. Si tanqueu la pàgina perdreu tots els canvis fets fins ara.

Premeu D’acord per a continuar, o cancel·la per a romandre a la pàgina actual

Les frases que hi ha just abans i després de les nostres les posa el navegador (en aquest cas Firefox) i no es poden eliminar, substituir ni evitar de cap tipus de les maneres.

Val a dir que en cas que el navegador no tingui implementat aquest event, aquests simplement l’ignoraran i no mostraran pas el missatge a l’usuari.

Pàgines protegides

Recapitulem. La raó principal d’aquest article és que fa poc a la feina em varen demanar que implementés una funcionalitat per a protegir pàgines: volien poder mostrar un missatge quan un usuari intentés abandonar la pàgina enmig d’un formulari dins d’un procés amb un cert flux o bé intentés abandonar una pàgina, la construcció de la qual fos molt costosa. Un exemple ideal per a treure l’event onbeforeunload de la nostra cartera de recursos. Anem a construir-ho.

Per tal de poder marcar si una pàgina la tractem com a protegida o no, és a dir, si registrem l’event onbeforeunload per mostrar un missatge a l’usuari en cas d’abandonar la pàgina, afegirem la classe protected a l’element /body de la pàgina:

<body class="protected">

Així, si usem jQuery, podem afegir les següents línies de codi per a tenir-ho fet:

$('body.protected').each(function () {
  window.onbeforeunload = function(e){
    return "Si abandones, ho perdràs tot per sempre!";
  };
});

Però tenim un petit inconvenient: si fem clic en un enllaç o si enviem el formulari fent clic a un botó, se’ns mostrarà el missatge, cosa que volem evitar. Això es pot resoldre inhabilitant l’event en cas de fer clic a certs elements:

$('body.protected p.botons input, body.protected a.sense-onbeforeunload', context).click(function () {
  window.onbeforeunload = null;
});

I així de fàcil obtenim el que busquem. Fàcil, oi? I segur que a més d’un li sembla útil, i fins i tot, més que necessari en alguna situació quotidiana.

Recursos

Etiquetes: , , ,

Aquesta entrada fou escrita el dimecres 9 setembre 2009 a les 15.30 i desada a Desenvolupament. Pots seguir les respostes a aquesta entrada amb el fil RSS 2.0. Pots respondre, o fer un retroenllaç des del teu propi web.

2 Respostes a “Protegir pàgines amb l’event onbeforeunload”

  1. Miguel escrigué:
    15 desembre 2009 a les 21.02

    Buen Tip Ramón ;) Es mi primera visita, pero volveré. Habia menospreciado tu blog

    Por cierto la página de error al enviar el comentario no me gusta, no hay manera de volver sin utilizar el botón atras, facilitant? per ara no.

    P.D: permiteme escribir en castellano :-)

    Saludos!

  2. Ramon Vilar Gavaldà escrigué:
    15 desembre 2009 a les 22.57

    @Miguel Gràcies per la felicitació. Intento sempre posar per aquí les coses que trobo més útils, encara que la falta de temps em condemna una mica a no poder escriure tot el que vull.
    Cap problema per escriure en espanyol, està dins del catàleg de llengües que conec ;)
    I pel que fa a la pàgina d’error, m’ho miraré. Gràcies!

Fer un comentari