Inclure une feuille CSS dans un fichier JS

**NeraOne** · 12/07/2011, 10h30

Bonjour à tous !

Je chercher à inclure une feuille CSS depuis un fichier JS. Je fait cela car la feuille CSS dépend de paramètres côté client, donc c'est de la post-inclusion mais cela fonctionne, voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = path + "/css/style.css";
headID.appendChild(cssNode);

La variable "path" est envoyé depuis le serveur et la récupération fonctionne correctement, j'en ai fait la vérification.
Le problème c'est que le "href" qu'il me créer est composé de : URL visitée + path + "/css/style.css". Et forcément suivant l'URL visitée ça ne fonctionne pas toujours... Quand je suis dans la Home : OK, mais quand je navigue et que je suis dans des dossiers, forcément l'URL complète de la CSS n'est plus valide.

En bref si j'écris dans mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cssNode.href = "";

le lien qu'il me met n'est pas vide mais correspond à l'URL visitée... Et moi je voudrais pouvoir paramétrer moi même l'intégralité de ce lien... Je ne sais pas comment faire...

Quelqu'un saurait comment faire cela ?

Antoine

**SpaceFrog** · 12/07/2011, 10h34

a toi de décompser l'url de la page vistée pour une conserver que la partie souhaitée ...

**NeraOne** · 12/07/2011, 10h36

Ben oui, c'est que je me suis dis, pas de problème, mais je peux pas définir quelques chose en dur dans cette variable, puisqu'il va toujours me rajouté l'url visitée au début de la variable...
Il le fait après j'imagine...

Je fais un petit test, je post desuite !

**NeraOne** · 12/07/2011, 10h40

Mettons je fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
cssNode.href = ""; //Pour récupérer l'URL visitée
var foo = cssNode.href;
foo = "localhost/";
cssNode.href = foo + path + "/css/style.css";

Je fait une alert en suivant de cssNode.href, et elle est égale à :
URL visitée + contenu de foo + contenu de path + "/css/style.css"

Donc j'ai pas moyen d'assigner entiérement moi même ce href... Enfin je sais pas comment du moins... !

**SpaceFrog** · 12/07/2011, 10h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var foo = cssNode.href;
foo = "localhost/";

ça sert à quoi ?

je n'ai pas encore compris ce qui e gène ...

tu veux quoi dans ton href ???

**Bovino** · 12/07/2011, 10h55

J'imagine que tous tes fichiers CSS sont au même endroit, dans ce cas, autant passer par une URL absolue

**NeraOne** · 12/07/2011, 11h06

En bref si j'écris dans mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cssNode.href = "";

le lien qu'il me met n'est pas vide mais correspond à l'URL visitée... Et moi je voudrais pouvoir paramétrer moi même l'intégralité de ce lien... Je ne sais pas comment faire...

C'est quoi qui n'est pas claire la dedans ? Je peux mettre ce que je veux dans mon cssNode.href, y compris un chemin absolu, il va de toute façon me rajouter l'URL visitée au début...

[EDIT] : et cette URL visitée elle change donc je ne peux pas la prévoir...

**SpaceFrog** · 12/07/2011, 11h08

oui mais il te faut reduire l'url de la page visitée ...

**NeraOne** · 12/07/2011, 11h11

Je peux pas... il me la rajoute après, c'est pas comme si elle étais iniialisé et que je pouvais la bouger...

En gros moi je met ce que je veux dans cette variable, au moment de s'exécuter le script ajoute l'url visitée au début...

**SpaceFrog** · 12/07/2011, 11h13

c'est clair comme du jus de chaussettes ...

tu le recupères ou le path ????

**Bovino** · 12/07/2011, 11h21

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
cssNode.href = ""; //Pour récupérer l'URL visitée
var foo = cssNode.href;
foo = "/";
cssNode.href = foo + path + "/css/style.css";

**NeraOne** · 12/07/2011, 11h27

Bon je reprend :

Je suis obligé de faire l'inclusion de mon CSS côté client, donc en JS, je vous passe le pourquoi...

Pour faire l'inclusion, si on veux le faire propre, on fait comme ça, enfin d'après ce que j'ai compris... :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "monStyle.css";
headID.appendChild(cssNode);

Voila on s'arrête la... Maintenant j'affiche dans une alert la variable cssNode.href pour voir son contenu, voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(cssNode.href);

Je sais pas vous mais moi je m'attends à voir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monStyle.css

Hé bé non !!!!

J'ai à la place :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

localhost/site/monStyle.css

Alors ça marche parce que monStyle.css est dans le répertoire site.

Je réexécute mon JS à un autre endroit du site (en fait à chaque page), et j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
localhost/site/topics/monStyle.css
ou
localhost/site/forums/monStyle.css

Du coup ça marche plus forcément... mais moi j'ai rien changé dans mon JS...

Du coup je cherche à mettre l'URL absolue de mon CSS, bonne idée ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "localhost/site/monStyle.css";
headID.appendChild(cssNode);

Quand j'affiche ma variable cssNode.href, j'obtiens cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

localhost/site/localhost/site/monStyle.css

Ou bien si je suis dans topics, j'ai ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

localhost/site/topics/localhost/site/monStyle.css

Donc on voit bien que quoi qu'il arrive il me met forcément l'url que je visite au début...

Je sais pas si vous avez une solution, mais vous avez compris le problème ?

**SpaceFrog** · 12/07/2011, 11h33

donc un split / sur le href et un lenght du tableau obtenu te permettra de rajouter le bon nombre de ../ à rajouter devant le path

**NeraOne** · 12/07/2011, 11h37

Oué, c'est pas d'une élégance folle mais au moins ça devrait marcher...

Merci

**Bovino** · 12/07/2011, 11h38

Comme j'ai essayé de te le faire comprendre dans mes précédentes réponses, l'URL que tu indiques est une URL relative, donc qui dépend de ta position dans l'arborescence, d'autant que dans la syntaxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cssNode.href = "localhost/site/monStyle.css";

localhost ne correspond à rien et est considéré comme un dossier.

Il te faut donc passer par une URL absolue soit en remplaçant localhost par "/"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cssNode.href = "/site/monStyle.css";

soit en précisant que tu cherches localhost sur le protocole http :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cssNode.href = "http://localhost/site/monStyle.css";

**NeraOne** · 12/07/2011, 11h42

Ah oui en effet Bovino, je ne mettais pas le protocole mais Js est intelligent donc si je le met, il rajoute rien... Bon c'est un peu brutal mais ça tourne !!

Je te remercie

**Bovino** · 12/07/2011, 11h46

Personnellement, j'aurais choisi l'autre solution (juste un slash) parce que j'imagine que ton site est destiné à être hébergé, donc si tu veux garder ton code en local pour les tests et hébergé pour la production, tu devras à chaque fois changer le localhost et le nom de domaine, si tu mets juste un slash "/", le code sera le même dans toutes les configurations.

**NeraOne** · 12/07/2011, 11h54

Oui oui en effet mais comme je suis sous Drupal, je peux faire envoyé depuis le serveur l'URL d'installation, donc j'ai moyen de reconstruire à chaque fois l'URL complète de ma CSS !

Au final les deux solutions revienne au même, enfin à ceci prêt que je doive faire envoyé un paramètre... donc oui tu as raison, le / seul suffit et devrait être opérationnel dans tout les contextes !

Merci !

**SpaceFrog** · 12/07/2011, 11h58

tu aurais pu aussi concaténer le path coté serveur ...

**sekaijin** · 12/07/2011, 13h39

perso j'ai dans mes serveur un code qui retourne toujours l'url de base de mon appli par exemple
http://mon.appli.com/
pour rn dev http://localhost/monAppli/
je m'en sert tant côté serveur que côté client
pour la passer au client j'ai un objet json que je position dans ma page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monAppli = <?php echo json_encode($myApp); ?>

myApp contient baseUrl qui est l'url en question language qui est la langue courante et tout ce dont je peux avoir besoin.
du coup tout mes urls sont absolue il me suffit en js d'utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monAppli.baseUrl

dans ton exemple ça donnerait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = monAppli.baseUrl + "monStyle.css";
headID.appendChild(cssNode);

A+JYT

Inclure une feuille CSS dans un fichier JS

JavaScript

Discussions similaires

Partager

Partager