Passer des paramètres aux fichiers JavaScript

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

Ce code appartient à file.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> 

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 certains fichiers, vous pouvez obtenir les valeurs des 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…

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; } 

Une autre idée que j'ai rencontrée était d'assigner un «id» à l'élément et de passer les arguments en tant que données- * attributs. L'étiquette résultante ressemblerait à ceci:

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

Le script pourrait ensuite utiliser l'identifiant pour se localiser par programme et analyser les arguments. Compte tenu de la balise précédente, le nom pourrait être récupéré comme ceci:

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

On obtient name = helper

Voici une preuve de concept très pressé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 survivra pas longtemps dans la nature. Tout commentaire pour le rendre plus présentable ou utilisable est le bienvenu.

La clé consiste à définir un identifiant pour votre élément de script. Le seul attrait est que cela signifie que vous ne pouvez appeler le script qu'une seule fois car il recherche cette ID pour tirer la chaîne de requête. Cela pourrait être corrigé si, au lieu de cela, le script effectue une boucle dans tous les éléments de requête pour voir si l'un d'eux le signale et, dans l'affirmative, utilise la dernière instance d'un tel élément de script. De toute façon, 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 les variables globales :-D.

Comme ça:

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

Le code JavaScript dans 'file.js' peut accéder à obj1 et obj2 sans problème.

EDIT Il suffit de vouloir ajouter que si 'file.js' veut vérifier si obj1 et obj2 ont même été déclarés, vous pouvez utiliser la fonction suivante.

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

J'espère que cela t'aides.

Cela peut être facilement effectué si vous utilisez un cadre Javascript comme jQuery. Ainsi,

 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 vos paramètres variables.

Le même processus peut être effectué sans cadre, mais prendra plus de lignes de code.

Pourrait ê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 peut ensuite utiliser comme

 console.log(json.id); 

Une belle question et des réponses créatives, mais ma suggestion est de paramétrer vos méthodes et cela devrait résoudre tous vos problèmes sans trucs.

Si vous avez une fonction:

 function A() { var val = external_value_from_query_string_or_global_param; } 

Vous pouvez modifier ceci pour:

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

Je pense que c'est une approche très naturelle, vous n'avez pas besoin de casser des documents supplémentaires sur les «paramètres de fichier» et vous en recevez les mêmes. Ceci est particulièrement utile si vous permettez à d'autres développeurs d'utiliser votre fichier js.

Eh bien, vous pourriez avoir le fichier javascript en cours de construction par l'une des langues de script, en injectant vos variables dans le fichier sur chaque demande. Vous devriez dire à votre serveur web de ne pas jeter les fichiers js statiquement (en utilisant mod_rewrite suffirait).

Soyez conscient que vous perdez toute mise en cache de ces fichiers js car ils sont modifiés en permanence.

Au revoir.

Non, vous ne pouvez pas vraiment le faire en ajoutant des variables à la partie querystring de l'URL du fichier JS. Si elle écrit la partie du code pour analyser la chaîne qui vous dérange, peut-être une autre façon serait de coder json vos variables et de les mettre dans quelque chose comme l'attribut rel de la balise? Je ne sais pas à quel point il est valable en termes de validation HTML, si c'est quelque chose dont vous êtes très préoccupé. Ensuite, il vous suffit 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 valable html (je ne pense pas) mais il semble fonctionner si vous créez un attribut personnalisé pour la balise de 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 cela est meilleur ou pire que l'analyse de la chaîne source du script.