2009-06-12 5 views
31

Existe-t-il un moyen simple et fiable de déterminer l'URL du fichier JavaScript en cours d'exécution (à l'intérieur d'une page Web)?Quelle est l'URL de mon script src?

Ma seule pensée à ce sujet est de scanner le DOM pour tous les attributs du script src pour trouver comment le fichier actuel a été référencé, puis déterminer l'URL absolue en l'appliquant à document.location. Quelqu'un a d'autres idées, y a-t-il une méthode super simple que j'ai complètement oubliée? MISE À JOUR: Les éléments de script accessibles via le DOM ont déjà une propriété src qui contient l'URL complète. Je ne sais pas comment omniprésente/standard c'est, mais vous pouvez également utiliser getAttribute("src") qui retournera quelle que soit la valeur d'attribut brute dans le [X] HTML.

+0

double possible de [Comment pourrais-je obtenir le nom du fichier de script à partir de ce script?] (Http://stackoverflow.com/questions/710957/how-might-i-get-the -script-filename-from-within-that-script) – Bergi

Répondre

40

Mettez cela dans le fichier js qui doit connaître sa propre URL.

Fully Qualified (par exemple http://www.example.com/js/main.js):

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

    if (script.getAttribute.length !== undefined) { 
     return script.src 
    } 

    return script.getAttribute('src', -1) 
}()); 

Ou Comme il apparaît dans la source (par exemple /js/main.js):

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

    if (script.getAttribute.length !== undefined) { 
     return script.getAttribute('src') 
    } 

    return script.getAttribute('src', 2) 
}()); 

Voir http://www.glennjones.net/Post/809/getAttributehrefbug.htm pour l'explication du paramètre getAttribute étant utilisé (c'est un bug IE).

+0

Retournement génial! Merci! –

+1

Pour le plein qualifié ne pouvez-vous pas simplement utiliser script.src? Pourquoi utilisez-vous script.getAttribute ('src', -1) ??? –

+9

Bonne réponse. Une mise en garde - le script est chargé paresseux (injecté dans le DOM par un autre script), ce ne sera pas le dernier script dans le DOM, donc cet extrait exact ne fonctionnera pas. – ripper234

0

S'il s'agit d'une solution strictement client, la vôtre semble plutôt bonne. Si vous écrivez du code sur le serveur, vous pourriez probablement juste remplir un champ div/caché/(insérer votre élément HTML préféré ici) avec l'URL résolue au script, et ramasser cela avec votre javascript sur le côté client.

+0

côté serveur, il pourrait juste servir le js à travers asp/php/jsp/cgi et sortir l'URL en javascript à partir de là. – ZJR

+0

@ZJR - J'apprécie actuellement l'idée d'un "creux JS", cependant il est servi;) – simon

0

Vous voudrez peut-être jeter un oeil à https://addons.mozilla.org/en-US/firefox/addon/10345 si vous êtes intéressé à apprendre quelles fonctions (et donc quels fichiers) sont en cours d'exécution sur une page que vous ne contrôlez pas.

Si vous souhaitez savoir lequel de vos scripts est en cours d'exécution, il existe plusieurs façons de le faire: . Avec Firebug vous pouvez console.log() l'information. Même le simple fait de mettre des instructions d'alerte dans votre code (tout en étant ennuyeux) peut aider à déboguer de manière peu technologique. Vous pouvez également élever les erreurs et les attraper, puis traiter en utilisant les propriétés de l'erreur (voir: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error)

Cependant, pourquoi cela serait-il important? Si le script provoque déjà des erreurs, il est assez facile de déterminer où l'erreur se produit. S'il ne s'agit pas d'erreurs du tout, quel est l'avantage de savoir quel fichier provient de ?

+0

Dans mon projet actuel, les fichiers de ressources JavaScript sont fixés à un sous-répertoire spécifique. Déterminer l'URL absolue du script peut me dire quel est le répertoire de base local afin que je puisse le supprimer pour trouver la "clé" du document (comme le sait le côté serveur). Il sera utilisé pour générer des formulaires, des demandes asynchrones, etc. et non pour le débogage. –

+0

dans ce cas, ce que vous avez proposé ci-dessus est la seule solution vraiment disponible. –

6

Comme il apparaît dans la source (par exemple /js/main.js), c'est cross-browser:

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

    //No need to perform the same test we do for the Fully Qualified 
    return script.getAttribute('src', 2); //this works in all browser even in FF/Chrome/Safari 
}()); 

Fully Qualified (par exempleAprès quelques tests, il semble difficile d'obtenir le entièrement qualifié un dans un navigateur croisé. Le solution suggested by Crescent Freshne fonctionne pas dans IE8 pour obtenir le pleinement qualifié, même si elle travaille dans IE7

4

Cette méthode de travail avec defer, async et le chargement paresseux Puisque vous connaissez le nom de votre script, et si elle sera unique,

/* see 
* http://stackoverflow.com/questions/984510/what-is-my-script-src-url/984656#984656 
* http://www.glennjones.net/Post/809/getAttributehrefbug.htm 
* 
* iterate all script to find script with right filename 
* this work with async and defer (but your script MUST have a unique filemane) 
* mozilla support document.currentScript and we use it, if is set 
* 
* this will not work with local script loaded by jQuery.getScript(), 
* since there is no script tag added into the dom. the script is only evaluated in global space. 
* http://api.jquery.com/jQuery.getScript/ 
* 
* to fix this odd, you can add a reference in meta (meta[name=srcipt][content=url]) 
* when you load the script 
*/ 
var scriptFilename = 'jquery.plugins.template.js'; // don't forget to set the filename 
var scriptUrl = (function() { 
    if (document.currentScript) { // support defer & async (mozilla only) 
     return document.currentScript.src; 
    } else { 
     var ls,s; 
     var getSrc = function (ls, attr) { 
      var i, l = ls.length, nf, s; 
      for (i = 0; i < l; i++) { 
       s = null; 
       if (ls[i].getAttribute.length !== undefined) { 
        s = ls[i].getAttribute(attr, 2);      
       }    
       if (!s) continue; // tag with no src 
       nf = s; 
       nf = nf.split('?')[0].split('/').pop(); // get script filename 
       if (nf === scriptFilename) { 
        return s; 
       } 
      } 
     };   
     ls = document.getElementsByTagName('script'); 
     s = getSrc(ls, 'src'); 
     if (!s) { // search reference of script loaded by jQuery.getScript() in meta[name=srcipt][content=url] 
      ls = document.getElementsByTagName('meta');    
      s = getSrc(ls, 'content'); 
     }   
     if (s) return s; 
    } 
    return ''; 
})(); 

var scriptPath = scriptUrl.substring(0, scriptUrl.lastIndexOf('/'))+"/"; 

un modèle de plugin jquery avec elle: https://github.com/mkdgs/mkdgs-snippet/blob/master/javascript/jquery.plugins.template.js

Note: cela ne fonctionnera pas avec script local chargé par jQuery.getScript(), car il n'y a pas de balise de script ajouté dans le Royaume. le script est uniquement évalué dans l'espace global. http://api.jquery.com/jQuery.getScript/

pour le fixer, vous pouvez faire quelque chose comme:

function loadScript(url,callback) {  

    if ($('[src="'+url+'"]').length) return true; // is already loaded  

    // make a reference of the loaded script 
    if ($('meta[content="'+url+'"]', $("head")).length) return true; // is already loaded 
    var meta = document.createElement('meta'); 
    meta.content = url; 
    meta.name = 'script'; 
    $("head").append(meta); 

    return $.ajax({ 
      cache: true, 
      url: u, 
      dataType: 'script', 
      async: false, 
      success : function (script) {      
       try { 
        if (typeof callback == 'function') callback();  
       } catch (error) { 
        //console.log(error); 
       } 
      } 
    }); 
} 
+0

Utilisation intéressante de 'document.currentScript' ici. Malheureusement, les informations de support du navigateur ne sont pas disponibles sur http://caniuse.com. Vous pouvez aider en mettant à jour le problème ouvert: http://github.com/Fyrd/caniuse/issues/1099. – Stephan

+0

J'ai voté pour mais caniuse.com n'est pas la seule source d'information. https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript – Mkdgs

29

Pour les navigateurs récents, vous pouvez utiliser document.currentScript pour obtenir ces informations. L'avantage est qu'il est plus fiable pour les scripts chargés de manière asynchrone. L'inconvénient est que ce n'est pas, comme je le sais, universellement soutenu. Il devrait fonctionner sur Chrome> = 29, FireFox> = 4, Opera> = 16. Comme beaucoup de choses utiles, il ne semble pas fonctionner dans IE.

Lorsque j'ai besoin d'un chemin de script, je vérifie si document.currentScript est défini et, si ce n'est pas le cas, utilise la méthode décrite dans la réponse acceptée.

if (document.currentScript) { 
    mySource = document.currentScript.src; 
} else { 
    // code omitted for brevity 
} 

https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript

+0

http://caniuse.com ne surveille pas encore cette fonctionnalité. Vous pouvez aider avec un upvote ici: http://github.com/Fyrd/caniuse/issues/1099. – Stephan

Questions connexes