Passage de paramètres aux fichiers JavaScript

Question

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

Donc le code est quelque chose comme ça :

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

Mais ce que je veux faire, c'est :

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

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

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

Et ensuite chercher mes valeurs.

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

Connaissez-vous d'autres méthodes ?

Answer 1

Je recommande de ne pas utiliser de variables globales si possible. Utilisez un espace de noms et la POO 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>

Answer 2

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>

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

Answer 3

Regardez cette URL. Elle fonctionne parfaitement pour le besoin.

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

Answer 4

Vous utilisez des 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 aux éléments suivants obj1 y obj2 sans problème.

EDIT Je veux juste ajouter que si 'file.js' veut vérifier si obj1 y 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 vous aidera.

Answer 5

Voici une preuve de concept très rapide.

Je suis sûr qu'il y a au moins deux endroits où des améliorations peuvent être apportées, et je suis également sûr que cela ne survivrait pas longtemps dans la nature. Tout commentaire pour le rendre plus présentable ou utilisable est le bienvenu.

La clé est de définir un id pour votre élément script. Le seul hic est que cela signifie que vous ne pouvez appeler le script qu'une seule fois puisqu'il recherche cet ID pour tirer la chaîne de requête. Cela pourrait être corrigé si, au lieu de cela, le script boucle à travers tous les éléments de requête pour voir si l'un d'entre eux pointe vers lui, et si oui, utilise la dernière instance d'un tel élément script. Bref, passons au code :

script en cours d'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é par 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>