Passer des paramètres aux fichiers JavaScript

Vous pouvez passer des paramètres avec des attributs arbitraires. Cela fonctionne dans tous les navigateurs récents.

<script type="text/javascript" data-my_var_1="some_val_1" data-my_var_2="some_val_2" src="/js/somefile.js"></script>

À l'intérieur de somefile.js vous pouvez obtenir des valeurs de variables passées de cette façon:

........

var this_js_script = $('script[src*=somefile]'); // or better regexp to get the file name..

var my_var_1 = this_js_script.attr('data-my_var_1');   
if (typeof my_var_1 === "undefined" ) {
   var my_var_1 = 'some_default_value';
}
alert(my_var_1); // to view the variable value

var my_var_2 = this_js_script.attr('data-my_var_2');   
if (typeof my_var_2 === "undefined" ) {
   var my_var_2 = 'some_default_value';
}
alert(my_var_2); // to view the variable value

...etc...

Une autre idée que j'ai rencontrée était d'attribuer un " id " à l'élément et de passer les arguments en tant qu'attributs data -*. La balise résultante ressemblerait à ceci:

<script id="helper" data-name="helper" src="helper.js"></script>

Le script pourrait alors utiliser l'id pour se localiser par programmation et analyser les arguments. Étant donné la balise précédente, le nom pourrait être récupéré comme ceci:

var name = document.getElementById("helper").getAttribute("data-name");

Nous obtenons nom = helper

Consultez cette URL. Il fonctionne parfaitement pour l'exigence.

Http://feather.elektrum.org/book/src.html

Merci beaucoup à l'auteur. Pour une référence rapide, j'ai collé la logique principale ci-dessous:

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var queryString = myScript.src.replace(/^[^\?]+\??/,'');

var params = parseQuery( queryString );

function parseQuery ( query ) {
  var Params = new Object ();
  if ( ! query ) return Params; // return empty object
  var Pairs = query.split(/[;&]/);
  for ( var i = 0; i < Pairs.length; i++ ) {
    var KeyVal = Pairs[i].split('=');
    if ( ! KeyVal || KeyVal.length != 2 ) continue;
    var key = unescape( KeyVal[0] );
    var val = unescape( KeyVal[1] );
    val = val.replace(/\+/g, ' ');
    Params[key] = val;
  }
  return Params;
}

Voici une preuve de concept très précipitée.

Je suis sûr qu'il y a au moins 2 endroits où il peut y avoir des améliorations, et je suis également sûr que cela ne survivrait pas longtemps dans la nature. Toute rétroaction pour le rendre plus présentable ou utilisable est la bienvenue.

La clé définit un id pour votre élément de script. Le seul hic est que cela signifie que vous ne pouvez appeler le script qu'une seule fois car il Recherche cet ID pour extraire la chaîne de requête. Cela pourrait être corrigé si, à la place, le script Boucle tout requête éléments pour voir si l'un d'entre eux soulignent que c'est, et si oui, utilise la dernière instance d'un tel élément de script. Quoi qu'il en soit, avec le code:

Script appelé:

window.onload = function() {
//Notice that both possible parameters are pre-defined.
//Which is probably not required if using proper object notation
//in query string, or if variable-variables are possible in js.
var header;
var text;

//script gets the src attribute based on ID of page's script element:
var requestURL = document.getElementById("myScript").getAttribute("src");

//next use substring() to get querystring part of src
var queryString = requestURL.substring(requestURL.indexOf("?") + 1, requestURL.length);

//Next split the querystring into array
var params = queryString.split("&");

//Next loop through params
for(var i = 0; i < params.length; i++){
 var name  = params[i].substring(0,params[i].indexOf("="));
 var value = params[i].substring(params[i].indexOf("=") + 1, params[i].length);

    //Test if value is a number. If not, wrap value with quotes:
    if(isNaN(parseInt(value))) {
  params[i] = params[i].replace(value, "'" + value + "'");
 }

    // Finally, use eval to set values of pre-defined variables:
 eval(params[i]);
}

//Output to test that it worked:
document.getElementById("docTitle").innerHTML = header;
document.getElementById("docText").innerHTML = text;
};

Script appelé via la page suivante:

<script id="myScript" type="text/javascript" 
        src="test.js?header=Test Page&text=This Works"></script>

<h1 id="docTitle"></h1>
<p id="docText"></p>

Vous utilisez des variables globales: - D.

Comme ceci:

<script type="text/javascript">
   var obj1 = "somevalue";
   var obj2 = "someothervalue";
</script>
<script type="text/javascript" src="file.js"></script">

Le code JavaScript dans ' Fichier.js peut accès à obj1 et obj2 sans problème.

EDIT je veux juste ajouter cela si ' fichier.js' veut vérifier si obj1 et obj2 ont même été déclarées vous pouvez utiliser la fonction suivante.

function IsDefined($Name) {
    return (window[$Name] != undefined);
}

J'espère que cela aide.

Peut être très simple

Par exemple

<script src="js/myscript.js?id=123"></script>
<script>
    var queryString = $("script[src*='js/myscript.js']").attr('src').split('?')[1];
</script>

Vous pouvez ensuite convertir la chaîne de requête en json comme ci-dessous

var json = $.parseJSON('{"' 
            + queryString.replace(/&/g, '","').replace(/=/g, '":"') 
            + '"}');

Et puis peut utiliser comme

console.log(json.id);

Cela peut être facilement fait si vous utilisez un framework Javascript comme jQuery. Comme ça,

var x = $('script:first').attr('src'); //Fetch the source in the first script tag
var params = x.split('?')[1]; //Get the params

Maintenant, vous pouvez utiliser ces paramètres en divisant comme paramètres variables.

Le même processus peut être fait sans aucun framework mais prendra plus de lignes de code.

Eh bien, vous pourriez avoir le fichier javascript en cours de construction par l'un des langages de script, en injectant vos variables dans le fichier à chaque requête. Vous devriez dire à votre serveur web de ne pas distribuer les fichiers JS statiquement (utiliser mod_rewrite suffirait).

Sachez cependant que vous perdez toute mise en cache de ces fichiers js car ils sont constamment modifiés.

Bye.

Belle question et réponses créatives mais ma suggestion est de paramétrer vos méthodes et cela devrait résoudre tous vos problèmes sans astuces.

Si vous avez une fonction:

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

Vous pouvez changer ceci en:

function B(function_param)
{
    var val = function_param;
}

Je pense que c'est l'approche la plus naturelle, vous n'avez pas besoin de créer de la documentation supplémentaire sur les 'paramètres de fichier' et vous recevez la même chose. Ceci est particulièrement utile si vous autorisez d'autres développeurs à utiliser votre fichier js.

Non, vous ne pouvez pas vraiment le faire en ajoutant des variables à la partie querystring de l'URL du fichier JS. Si son écriture de la partie de code pour analyser la chaîne qui vous dérange, peut-être une autre façon serait de JSON encoder vos variables et les mettre dans quelque chose comme l'attribut rel de la balise? Je ne sais pas à quel point cela est valide en termes de validation HTML, si c'est quelque chose qui vous inquiète beaucoup. Ensuite, vous avez juste besoin de trouver l'attribut rel du script, puis json_decode cela.

Par exemple

<script type='text/javascript' src='file.js' rel='{"myvar":"somevalue","anothervar":"anothervalue"}'></script>

Ce n'est pas du html valide (Je ne pense pas) mais il semble que fonctionne si vous créez un attribut personnalisé pour la balise script dans votre page web :

<script id="myScript" myCustomAttribute="some value" ....>

Ensuite, accédez à l'attribut personnalisé dans le javascript:

var myVar = document.getElementById( "myScript" ).getAttribute( "myCustomAttribute" );

Je ne sais pas si c'est mieux ou pire que d'analyser la chaîne source du script.