☞ Quand JavaScript est désactivé... 1/2

Accueil Boite à Outils Quand JavaScript est désactivé... 1/2

Publié le : 24 janvier 2005

Imprimer cet article

Auteur :
Alain Sichel †

Quand JavaScript est désactivé... 1/2

Une page qui s’adapte quand JavaScript est désactivé

Lorsqu’on utilise JavaScript, il est souhaitable d’avertir les visiteurs qui ont désactivé JavaScript s’il s’agit d’une fonction importante pour bien utiliser le site. Voici deux techniques pour informer ou modifier l’affichage des pages.

Sommaire

Avertir le visiteur

Le plus simple est d’utiliser la balise <noscript> qui sert justement à cela. Ce code ne s’affichera que si JavaScript est désactivé, il ne dérangera donc pas les autres visiteurs.

Voisi un exemple reprenant l’avertissement présent dans le code des pages du CYES :

Cette page ne peut pas fonctionner correctement sans JavaScript. Veuillez le réactiver ou voyez notre page d'Aide Javascript.

Voici son code :

<noscript><p class="red">Cette page ne peut pas fonctionner correctement sans JavaScript. Veuillez le réactiver ou voyez notre page d'<a href="http://www.cyes.info/aide/javascript.php">Aide Javascript</a>.</p></noscript>

Ce message apparaît en rouge [1] pour attirer l’attention. Une phrase de ce type est destinée à informer des fonctions normalement assurées par JavaScript afin que le visiteur décide s’il veut le réactiver. On peut aussi proposer une page de conseils [2] et une alternative fonctionnant sans JavaScript [3].

Cacher ce qui ne fonctionne pas

Mais, tout ce que fait JavaScript n’est pas toujours indispensable à la visite d’un site. On peut alors masquer les parties d’une page qui ne fonctionnent pas quand JavaScript est désactivé.

Par exemple, sur le site du CYES, j’utilise ce système pour les boutons en bas de page qui proposent "Agrandir cette page en plein écran", "Imprimer cette page" et "Ajouter cette page à vos favoris".

Le principe : on rend un calque invisible en lui donnant le style style='display: none;' et on utilise un JavaScript qui change le style au chargement de la page, ainsi la partie cachée devient visible si JavaScript fonctionne, mais reste invisible s’il est désactivé [4].

Voici le code à mettre dans le <head> des pages [5] :

<script language="JavaScript" type="text/javascript">
<!--
var vis = new Array();
function MM_findObj(n, d) { //v4.0
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
   if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v='hide')?'none':v; }
   obj.display=v; }
}
function swap_couche(couche){
        if (vis[couche] == 'show'){
                MM_showHideLayers('Layer'+couche,'','hide');
                vis[couche] = 'hide';
        } else {
                MM_showHideLayers('Layer'+couche,'','show');
                vis[couche] = 'show';
        }
}
//-->
</script>

La fonction qui fait le changement visible/invisible est swap_couche(couche).

Voici le code destiné au calque à masquer :

<script language='JavaScript' type="text/javascript">

<!--

vis['Coucou'] = 'hide';

//-->

</script><div id='LayerCoucou' style='display: none;'>

Ici la partie fonctionnant avec JavaScript

</div>

J’ai trouvé que "Coucou" convenait bien comme identifiant pour un calque qui joue à cache-cache smiley

Bien sûr, pour que le script se déclenche au chargement de la page, il faut remplacer la balise <body> par <body onload="swap_couche('Coucou');">.

Si on a d’autres parties à masquer, on utilise d’autres calques, chacun avec un identifiant spécifique, par exemple :

<script language='JavaScript' type="text/javascript">

<!--

vis['Calque2'] = 'hide';

//-->

</script><div id='LayerCalque2' style='display: none;'>

Ici la partie fonctionnant avec JavaScript

</div>

<body onload="swap_couche('Coucou');swap_couche('Calque2');">

Exemple d’utilisation

Voici sur le site du CYES l’affichage complet du bas de page [6] :

Si JavaScript est désactivé, plusieurs images ne sont pas affichées (Agrandir en plein écran, Imprimer cette page et Ajouter aux favoris) :

[1] La feuille de style contient :

.red {color: #ff0000;

background-color: transparent;

}

[2] Par exemple : Aide JavaScript.

[3] C’est le cas sur le site du CYES qui propose un Menu de navigation sans JavaScript.

[4] Ce script est une adaptation de celui décrit dans l’article Menu dépliant pour les rubriques.

[5] Ou dans une feuille de style externe appellée par le code suivant mis dans le <head> :

<script language="JavaScript" type="text/javascript" src="/script.js"></script>

[6] La barre d’icônes montrée ici nest plus utilisée actuellement sur le site du CYES, elle est remplacée par un menu écrit, plus compréhensible par les visiteurs ; ce menu utilise toujours ce script pour masquer les fonctions nécessitant Javascript à ceux qui l’ont désactivé.

Imprimer cet article