Passer des paramètres aux fichiers JavaScript

Souvent, j'aurai un fichier JavaScript que je veux utiliser qui nécessite que certaines variables soient définies dans ma page web.

, Donc le code est quelque chose comme ceci:

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

, Mais ce que je veux faire est:

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

J'ai essayé différentes méthodes et la meilleure est encore d'analyser la chaîne de requête comme ceci:

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

Puis recherchez mes valeurs.

Je me demande s'il existe un autre moyen de le faire sans construire une fonction pour analyser ma chaîne.

Savez-vous tous d'autres méthodes?

127
demandé sur Anthony 2010-02-03 12:13:22

12 réponses

Je recommande de ne pas utiliser de variables globales si possible. Utilisez un espace de noms et une poo pour transmettre vos arguments à un objet.

Ce code appartient au fichier.js:

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function() {
            alert('Hello World! -' + _args[0]);
        }
    };
}());

Et dans votre fichier html:

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   MYLIBRARY.init(["somevalue", 1, "controlId"]);
   MYLIBRARY.helloWorld();
</script>
171
répondu Naeem Sarfraz 2010-02-03 09:33:20

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...

55
répondu Vlado 2013-02-25 14:28:40

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

32
répondu NewBuddy 2013-07-16 13:21:47

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;
}
17
répondu user378221 2011-03-29 15:22:29

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>
12
répondu Anthony 2010-02-03 11:15:59

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.

10
répondu NawaMan 2010-02-03 09:19:10

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);
9
répondu Tofeeq 2016-03-01 11:27:48

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.

6
répondu GeekTantra 2010-02-03 09:20:05

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.

1
répondu aefxx 2010-02-03 09:21:51

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.

1
répondu dzida 2010-06-28 16:53:50

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>
0
répondu Dal Hundal 2010-02-03 09:25:11

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.

0
répondu Cor 2013-04-14 04:53:24