Comment afficher un message temporaire au chargement d'une page, pour faire patienter le visiteur par exemple, ou bien pour l'informer d'une nouvelle récente particulièrement importante ?

Du temps du HTML classique, la seule possibilité était d'ouvrir un popup pour afficher une page auxilaire contenant le message, plus un script ad hoc pour refermer automatiquement le popup. Mais les popups qui s'ouvrent tout seuls ont mauvaise presse ; pour beaucoup de visiteurs, ils sont synonymes d'une pub indésirable et ils risquent d'être refermés d'un coup de souris hargneux, avant même d'être lus.

La technique des calques [1] [2], héritée du HTML4 et des CSS, offre une alternative séduisante. La méthode consiste à mettre le message dans un calque bien visible dans la page, écrit tout au début de la page (de telle sorte qu'il apparaisse tout de suite lors du chargement) et à commander sa disparition par l'évènement «fin du chargement de la page», géré par le gestionnaire onLoad, en attribut de la balise <BODY> :
    <BODY ... onLoad="cache('message')">  
Dans cette écriture, cache() serait la fonction javascript chargée de rendre le calque invisible, celle-là même que nous avons donnée dans [1], et message serait l'identificateur (ID) du calque.

Temporisation de la fermeture

Le codage précédent entraîne une fermeture instantanée à la fin du chargement. Ce serait parfait pour un message destiné à faire prendre patience lors du chargement d'une page un peu trop chargée, mais pas pour un message important destiné à être retenu. En effet, comme le message ne serait visible que durant le chargement de la page, un visiteur sur une ligne à haut débit n'aurait pas le temps d'y lire quoi que ce soit.

Il faut donc retarder l'instant de la fermeture. Cela se fait aisément au moyen de la fonction setTimeout(). Le codage ci-dessous déclenchera la disparition 4 secondes après la fin du chargement :
 <BODY ... 
    onLoad="setTimeout('cache(\'message\')',4000)"> 
Le premier argument de setTimeOut() est exactement la même chaîne de caractères cache('message') que dans notre premier codage (aux antislashs près, qui sont nécessaires pour que les quotes soient interprétées comme faisant partie de la chaîne de caractères). Le deuxième argument est la temporisation en millisecondes.

On peut évidemment remplacer cette fermeture automatique par un simple lien javascript :
  <a href="javascript:cache('message')">cliquez 
           pour effacer ce message</a> 
pour laisser au visiteur le soin de faire disparaître l'avertissement.

Oui, mais si on désactivé javascript ?

Aie... dans ce cas, le message reste au milieu de la page et ne s'en va pas. Tant pis pour ces gens-là, y-z'ont qu'à faire comme tout le monde ? Allons, sans revenir sur les raisons de désactiver son javascript, il est assez facile de modifier notre scénario en fonction de cette petite minorité d'empêcheurs de javascripter en rond.

Le principe consistera à
1 - écrire dynamiquement le code du calque, en argument d'un document.write(). On fera attention à l'imbrication inévitable des quotes et double quotes et, éventuellement, on pensera aux antislashes (le code « \" » dans une phrase est une simple double quote, jamais un séparateur de chaîne). Tout se déroulera donc précédemment pour les tenants du javascript.
2 — Pour les autres, on réécrira le message dans une balise <noscript>... </noscript>, dans un endroit de la page où ça ne gênera pas trop l'affichage du reste de la page (penser que ce message restera en place).

Démonstration

Vous l'avez vue en ouvrant cette page. Rechargez-la pour la revoir (le calque de message apparaît en haut de la page). Cela fonctionne sur tous les grands navigateurs du moment (sauf NN4x, mais mérite-t-il encore ce titre ?)

Ça ne fonctionne pas sur iCab (MacOS), pas encore vraiment à la hauteur :-(
A vrai dire, si on renonce à écrire le message dans un document.write(), ça fonctionne aussi avec NN4. Pauvre NN4...

Examinez notre code pour accéder aux détails.

Charles - (TOM)