Éviter de perdre le contenu rédigé sur le web

Les modules de gestion de contenu pour le web ont toujours été très populaires. Toutes les entreprises de développement web créent leurs propres CMS, d'autres utilisent Joomla et tous les clients veulent en utiliser, surtout pour ne pas avoir à se casser la tête avec le HTML.

Quand certains clients se plaignent qu'ils font de la rédaction par l'interface web et qu'ils perdent leur données non-sauvegardées, je peux comprendre que c'est fâcheux d'avoir à recommencer. Certains s'accrochent dans un lien ou le bouton back du fureteur, d'autres possèdent une souris dont un bouton latéral configurable permet de revenir à la page précédente. Mais le plus souvent, c'est que le curseur est hors focus de la boîte d'édition et que la personne appuie sur la touche backspace du clavier pour retirer un bout de phrase et hop!, il revient à la page précédente et le contenu est perdu.

C'est là qu'on peut intervenir en tant que programmeur. Il est possible de contrôler en partie les actions de navigation sur le fureteur à l'aide de l'événement onBeforeUnload. Du moins, c'est ce que j'ai mis en place et qui fonctionne au moins sur Firefox 3.x et Internet Explorer 8.

Il suffit d'attacher une fonction à l'événement onBeforeUnload que le navigateur pourra interpréter au moment où l'utilisateur changera de page (volontairement ou non).

Avec le framework Prototype (optionnel) :

Event.observe(window, 'beforeunload',
   function(event){
       event.returnValue = "Le contenu n'est pas enregistré.";
   }
);

Tout ce que ça fait ici, c'est de spécifier la raison pour laquelle le popup est affiché en personnalisant le message et d'attacher la fonction à l'événement. Le message retourné sera inséré dans le message par défaut du fureteur qui utilisera la langue d'installation sur le poste du client.

En français, le message se lira comme suit (Firefox) :

Voulez-vous vraiment quitter cette page ?
* VOTRE MESSAGE SERA INSÉRÉ ICI *
Appuyez sur OK pour continuer, ou Annuler pour rester sur la page actuelle.

Une fois cet événement initialisé, la fenêtre de confirmation sera affichée dès qu'on tentera de changer de page, y compris si on tente de soumettre le formulaire pour l'enregistrement. C'est pourquoi on pourra désactiver l'événement au moment de l'envoi pour ne pas qu'il achale l'utilisateur avec le popup.

Avant de soumettre le formulaire, contrôlez l'envoi par JavaScript et ajoutez l'instruction suivante extraite de Prototype avant d'invoquer submit() sur le formulaire :

Event.stopObserving(window, 'beforeunload');

Voici les équivalents en JavaScript pur, au cas où vous n'êtes pas friand de framework JavaScript :

window.onbeforeunload = function(){
   return  "Le contenu n'est pas enregistré.";
}

Pour désactiver l'événement avant de poster les données, vous pouvez assigner une fonction vide à onbeforeunload;

window.onbeforeunload = function(){}

Pour les blogueurs qui me lisent et qui utilisent Blogspot, c'est exactement cette technique que la plateforme utilise, mis à part qu'ils ont intégré un mécanisme d'enregistrement automatique de brouillon qu'on peut récupérer facilement si un problème survient.