Inclure une feuille CSS dans un fichier JS [Résolu]

[NeraOne]

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 :

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 :

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]

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

[NeraOne]

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]

Mettons je fait ça :

Code :

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]

Code :

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]

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

[NeraOne]

En bref si j'écris dans mon code :

Code :

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]

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

[NeraOne]

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]

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

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

[Bovino]

Code :

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]

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 :

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 :

alert(cssNode.href);

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

Code :

monStyle.css

Hé bé non !!!!

J'ai à la place :

Code :

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 :

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 :

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 :

localhost/site/localhost/site/monStyle.css

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

Code :

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]

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]

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

Merci

[Bovino]

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 :

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 :

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

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

Code :

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

[NeraOne]

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]

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]

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]

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

[sekaijin]

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 :

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 :

monAppli.baseUrl

dans ton exemple ça donnerait

Code :

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