Problème de portée de variable javascript ?

Résolu/Fermé
FabienCC - 26 mars 2008 à 21:50
 FabienCC - 27 mars 2008 à 09:19
Bonjour,

Je tente d'écrire un javascript pour lire le contenu d'un cookie et lier une page CSS en conséquence. La valeur du cookie est fixée par ailleurs (à l'entrée du site).

J'en suis là :

<head>
<script type="text/javascript">

CSScookValue = "" ;

function GetCookie ()
{
var egal = document.cookie.indexOf( "=" ) ;
CSScookValue = document.cookie.substring ( egal + 1 ) ;
if ( CSScookValue == "" ) {CSScookValue = 2 ;}//en l'absence de cookie, met la valeur par défaut à 2
}

if (CSScookValue == 1)
{
document.write ('<link rel="stylesheet" type="text/css" media="screen" href="../css/css1.css" />')
}
else {
if (CSScookValue == 2)
{
document.write ('<link rel="stylesheet" type="text/css" media="screen" href="../css/css2.css" />')
}
}
</script>
</head>
<body onLoad="GetCookie()">
texte témoin pour voir l'effet de la CSS chargée
</body>
</html>


Mais cela ne marche pas. Je pense qu'en fait, ma variable CSScookValue est remise à zéro dès que je sors de la fonction dans laquelle elle est acquise. Et si je mets mon IF de sélection CSS dans cette fonction, le navigateur boucle dans le vide (j'imagine que charger une css dans un fonction "onload" n'est pas possible (ça se mord la queue..).

J'ai essayé pas mal de chose, mais ma connaissance javascript n'est pas suffisante.

Si quelqu'un peut me donner un coup de main, cela serait très sympa.

Merci d'avance.

2 réponses

carbon3 Messages postés 470 Date d'inscription mercredi 20 février 2008 Statut Membre Dernière intervention 6 janvier 2013 73
27 mars 2008 à 02:16
salut,
voilà un arrangement qui fonctionne. Le truc c'est de définir l'appel au rel style avant de rentrer dans le body bien sûr. En sortant ton sélecteur du mode function, il est directement traité au niveau du head...
<html>
<head> 
<script language="javascript">
CSScookValue = "" ; 
var egal = document.cookie.indexOf( "=" ) ; 
CSScookValue = document.cookie.substring ( egal + 1 ) ; 
if ( CSScookValue == "" ) {
	CSScookValue = 2 ;
}//en l'absence de cookie, met la valeur par défaut à 2 

if (CSScookValue == 1) { 
	document.write ('<link rel="stylesheet" type="text/css" media="screen" href="css1.css" />');
} 
else { 
	document.write ('<link rel="stylesheet" type="text/css" media="screen" href="css2.css" />');
}
</script>
</head> 
<body> 
texte témoin pour voir l'effet de la CSS chargée 
</body> 
</html>

bonne chance pour la suite
;-)
2
Merci Carbon3 !

Effectivement, c'est tout simple, mais je n'y aurais jamais pensé. Merci beaucoup.

Une petite question bonus pour clore mon petit sélecteur CSS :

Pour choisir son style CSS, j'utilise un onClick="SetCookie(x)" implanté dans un <a>. Le x étant la fameuse variable que je récupère avec ton script. Ca ressemble à ça :

<a href="#" onClick="SetCookie(1)"><img src="fleche-right.gif" width="32" height="32" /></a>

Donc, je voudrais savoir ce que je dois rajouter pour recharger la page courante afin de charger la nouvelle CSS.Et où dois-je le rajouter ? dans la fonction setcookie ? dans mon <a> ?

Merci d'avance.
0
Je viens de trouver la réponse à ma question concernant le rechargement de la page :

il suffit de transformer :
<a href="#" onClick="SetCookie(1)"><img src="fleche-right.gif" width="32" height="32" /></a>

en
<a href="javascript:location.reload()" onClick="SetCookie(1)"><img src="fleche-right.gif" width="32" height="32" /></a>

C'est tout simple.

Merci encore Carbon3.

bye
0