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

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

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

A 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 Réponse de @Yared Rodriguez pour IE :

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

Answer 2

Il est préférable d'utiliser la fonctionnalité en html5 5 données Attributs

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

A l'intérieur du fichier script, on trouve 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>

Answer 3

Une autre solution consiste à utiliser des balises méta. Les données qui doivent être transmises à votre JavaScript peuvent être attribuées de la manière suivante :

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

Les données peuvent ensuite être extraites des métabalises comme suit (il est préférable de le faire dans un gestionnaire d'événements DOMContentLoaded) :

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

Absolument pas de problèmes avec jQuery ou autres, pas de bidouillages ni de contournements nécessaires, et fonctionne avec toutes les versions HTML qui prennent en charge les balises méta...

Answer 4

Je l'ai. C'est un peu un hack, mais ça marche 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é.

Answer 5

JQuery permet de passer des paramètres de HTML à javascript :

Mettez-le dans le myhtml.html archivo:

<!-- 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 subscript.js et d'y ajouter ceci :

//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 affiche 'foobar.mp4' à l'écran. La variable appelée video_filename a été transmise de html à javascript. Javascript l'a imprimé à l'écran, et il est apparu comme incorporé dans le html dans le parent.

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

http://jsfiddle.net/xqr77dLt/