javascript - Comment passer des paramètres à une balise Script ?

J'ai lu le tutoriel DIY widgets - Comment intégrer votre site sur un autre site pour les widgets XSS par le 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>

Y a-t-il un moyen de faire cela ?

Deux liens intéressants :

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

Réponse #1

Je m'excuse de répondre à une question très ancienne, mais après avoir passé une heure à me battre avec les solutions ci-dessus, j'ai opté pour des choses plus simples.

<script src=".." one="1" two="2"></script>

À l'intérieur du script ci-dessus :

document.currentScript.getAttribute('one'); // 1
document.currentScript.getAttribute('two'); // 2

Beaucoup plus facile que jQuery ou l'analyse d'URL.

Vous pourriez avoir besoin du polyfill pour document.currentScript de la réponse de @Yared Rodriguez pour IE :

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

Réponse #2

Il est préférable d'utiliser la fonctionnalité des attributs de données dans HTML5

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

Dans le fichier script http://path.to/widget.js, vous pouvez obtenir les paramètres de cette manière :

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

Réponse #3

Une autre façon est d'utiliser des balises meta. Toutes les données qui doivent être transmises à votre JavaScript peuvent être assignées de cette manière :

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

Les données peuvent ensuite être extraites des balises meta de cette façon (il est préférable de le faire dans un gestionnaire d'événement DOMContentLoaded) :

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

Aucun tracas avec jQuery ou des outils similaires, aucun piratage ni contournement nécessaire, et fonctionne avec n’importe quelle version de HTML qui prend en charge les balises meta...

Réponse #4

Compris. C’est un peu une astuce, mais ça fonctionne plutôt bien :

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

Je passe les paramètres dans la balise script en tant que classes :

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

Cet article a beaucoup aidé.

Réponse #5

JQuery a une façon de passer des paramètres du HTML au javascript :

Mettez ceci dans le fichier myhtml.html :

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

Dans le même répertoire, créez un fichier subscript.js et mettez ceci dedans :

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

Analyser le résultat :

Le chargement de la page myhtml.html a affiché ''foobar.mp4'' à l'écran. La variable appelée video_filename a été passée du HTML au JavaScript. JavaScript l'a affichée à l'écran, et elle est apparue comme intégrée dans le HTML du parent.

preuve jsfiddle que ce qui précède fonctionne :

http://jsfiddle.net/xqr77dLt/

Réponse #6

Créez un attribut qui contient une liste des paramètres, comme ceci :

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

Ensuite, dans votre JavaScript, obtenez 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