Comment passer des paramètres à une balise script ?

Question

J'ai lu le tutoriel Widgets DIY - Comment intégrer votre site sur un autre site pour XSS Widgets par Dr. Nic.

Je cherche un moyen de passer des paramètres à la balise script. Par exemple, pour faire fonctionner ce qui suit :

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

Existe-t-il un moyen de le faire ?

---

Deux liens intéressants :

• Comment intégrer un widget Javascript dépendant de jQuery dans un environnement inconnu ? (Discussion sur Stackoverflow)
• Un article sur le passage de paramètres à une balise script.

Answer 1

Créez un attribut qui contient une liste de paramètres, comme suit :

<script src="http://path/to/widget.js" data-params="1, 3"></script>

Ensuite, dans votre JavaScript, récupérez les paramètres sous forme de tableau :

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3

Answer 2

Si vous utilisez jquery, vous pouvez envisager d'utiliser leur méthode de collecte de données.

J'ai utilisé quelque chose de similaire à ce que vous essayez dans votre réponse, mais de la manière suivante :

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

Vous pouvez également créer une fonction qui vous permet de récupérer directement les paramètres GET (c'est ce que j'utilise fréquemment) :

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');

Answer 3

Il s'agit d'un très vieux fil de discussion, je le sais, mais cela pourrait également aider si quelqu'un arrive ici une fois qu'il a cherché une solution.

En fait, j'ai utilisé document.currentScript pour obtenir l'élément à partir duquel mon code est exécuté et j'ai filtré en utilisant le nom de la variable que je recherche. J'ai étendu currentScript avec une méthode appelée "get", de sorte que nous serons en mesure de récupérer la valeur à l'intérieur de ce script en utilisant :

document.currentScript.get('get_variable_name');

De cette manière, nous pouvons utiliser un URI standard pour récupérer les variables sans ajouter d'attributs spéciaux.

Voici le code final

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

J'avais oublié IE :) On ne peut pas faire plus simple... Je n'ai pas mentionné que document.currentScript est une propriété HTML5. Elle n'a pas été incluse pour les différentes versions d'IE (j'ai testé jusqu'à IE11, et elle n'était pas encore là). Pour la compatibilité avec IE, j'ai ajouté cette partie au code :

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Ce que nous faisons ici, c'est définir un code alternatif pour IE, qui renvoie l'objet script actuel, qui est nécessaire dans la solution pour extraire les paramètres de la propriété src. Il ne s'agit pas d'une solution parfaite pour IE, car il existe certaines limitations : si l'objet script est chargé de manière asynchrone, les navigateurs plus récents doivent inclure ".htm" dans le code. Les navigateurs plus récents doivent inclure la propriété ".currentScript".

J'espère que cela vous aidera.

Answer 4

Grâce à jQuery, une solution simple et conforme à HTML5 consiste à créer une balise HTML supplémentaire, comme div, pour stocker les données.

HTML :

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

JavaScript :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

Démonstration en direct avec le code ci-dessus : http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

Dans la démonstration en direct, on peut voir les données des attributs HTML5 data-* être concaténées et imprimées dans le journal.

Source : https://api.jquery.com/data/

Answer 5

C'est la solution pour jQuery 3.4

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})