Comment insérer une feuille de style externe en JavaScript (dynamiquement)

Question

... avec le bon chemin.

Par exemple. J'ai un script appelé foo.js. Je voudrais insérer la déclaration de feuille de style que je peux faire avec l'instruction suivante:

$('head').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />'); 

Problème: Je dois mettre le chemin complet vers le fichier de feuille de style. Donc, au lieu de /template/foo.css je dois mettre: http://hostname/directory/template/foo.css. Je ne peux pas le définir statiquement car le script peut être placé sur différents serveurs et à différents endroits. Il peut donc être: http://foo.com/bar/foo.css ou http://foo.com/foo.css.

Il serait très utile si je peux obtenir le chemin du fichier foo.js sur le serveur. Ce serait assez bon parce que je pourrais définir l'emplacement de la feuille de style en fonction du fichier de javascrpt.

Answer 1

Je l'ai toujours fait:

$('body').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />'); 

au lieu de tête

Ahh ... désolé, je viens de réaliser ce que votre problème. Une stratégie consiste à extraire le chemin du script du DOM lui-même:

$('script').each(function(i,el){ 
    var path = el.src.match(/^(.+)\/foo.js$/); 
    if (path) { 
     $('body').append('<link rel="stylesheet" ' + 
           'href="' + path[1] + '/foo.css" ' + 
           'type="text/css" />' 
         ); 
    } 
}) 

Answer 2

Vous pouvez utiliser window.location et obtenir le chemin à partir de cela. Par exemple, pour cette page est:

>>> window.location 
http://stackoverflow.com/questions/2033742/how-to-insert-external-stylesheet-in-javascript-dynamically 

Answer 3

Ceci est une technique courante que j'utilise pour obtenir l'URL du script en cours:

var scriptUrl = (function() { 
    var scripts = document.getElementsByTagName('script'), 
     script = scripts[scripts.length - 1]; 

    return script.src; 
})(); 

Il fonctionne essentiellement parce que quand la le script est en cours d'exécution, c'est le dernier tag script sur le DOM.