web-dev-qa-db-fra.com

Comment passer des paramètres à une balise de script?

J'ai lu le tutoriel: http://drnicwilliams.com/2006/11/21/diy-widgets/ pour les widgets XSS du Dr. Nic.

Je cherche un moyen de passer des paramètres à la balise de script. Par exemple, pour faire le travail suivant:

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

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

MISE À JOUR: Deux liens intéressants:

javascriptparameterswidgetxssscript-tag
65
Tomer Lichtash

Je l'ai. Un peu comme ça, mais ça marche pas mal gentil:

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 beaucoup aidé.

16
Tomer Lichtash

Je m'excuse d'avoir répondu à une très vieille question, mais après avoir passé une heure à lutter contre les solutions ci-dessus, j'ai opté pour des solutions plus simples.

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

Dans le script ci-dessus:

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

Beaucoup plus facile que jquery OR l'analyse syntaxique.

Vous aurez peut-être besoin du polyfil for doucment.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];
})();
85
Richard Fox

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

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

Dans le fichier de script http://path.to/widget.js vous pouvez obtenir les paramètres de cette façon:

<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>
55
OBender

JQuery a un moyen de passer des paramètres de HTML à javascript:

Mettez ceci dans le myhtml.html fichier: 

<!-- 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 file et mettez ceci ici: 

//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 l’impression "foobar.mp4" sur l’écran. La variable nommée video_filename est passée de HTML à javascript. Javascript l'a imprimé à l'écran, et il est apparu comme intégré dans le code HTML du parent.

jsfiddle prouve que cela fonctionne:

http://jsfiddle.net/xqr77dLt/

10
Eric Leschinski

Une autre façon consiste à utiliser des balises méta. Toutes les données censées être transmises à votre JavaScript peuvent être affecté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 balises META comme ceci (mieux dans un gestionnaire d’événements DOMContentLoaded):

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

Absolument aucun problème avec jQuery ou les goûts, pas de hacks et solutions de contournement nécessaires, et fonctionne avec toute version HTML qui prend en charge les balises méta ...

7
Robidu

Si vous utilisez jquery, vous voudrez peut-être envisager leur méthode de données.

J'ai utilisé quelque chose de similaire à ce que vous essayez dans votre réponse mais comme ceci:

<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 d’extraire 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');
7
rg88

c'est un très vieux fil, je sais, mais cela pourrait aussi aider si quelqu'un arrive ici une fois qu'il a cherché une solution.

Fondamentalement, j'ai utilisé le document document.currentScript pour obtenir l'élément à partir duquel mon code est en cours d'exécution et je filtre en utilisant le nom de la variable que je recherche. Je l'ai fait en étendant currentScript avec une méthode appelée "get", nous pourrons donc extraire la valeur à l'intérieur de ce script en utilisant:

document.currentScript.get('get_variable_name');

De cette façon, nous pouvons utiliser l'URI standard pour récupérer les variables sans ajouter d'attributs spéciaux.

C'est le code final

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

J'oubliais à propos de IE :) Cela ne pourrait pas être aussi facile ... Eh bien, je n'ai pas mentionné que document.currentScript est une propriété HTML5. Il n’a pas été inclus pour les différentes versions de IE (j’ai testé jusqu’à IE11 et il n’y était pas encore disponible). Pour la compatibilité 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 est de définir un code alternatif pour IE, qui renvoie l'objet de script actuel, qui est requis dans la solution pour extraire les paramètres de la propriété src. Ce n'est pas la solution parfaite pour IE, car il existe certaines limitations; Si le script est chargé de manière asynchrone. Les nouveaux navigateurs devraient inclure la propriété ".currentScript".

J'espère que ça aide.

3
Yared Rodriguez

Grâce à jQuery, une solution simple conforme à HTML5 consiste à créer une balise HTML supplémentaire, telle que 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émo en direct avec le code ci-dessus: http://codepen.io/anon/pen/KzzNmQ?editors=1011#

Sur la démonstration en direct, vous pouvez voir les données des attributs HTML5 data * * à concaténer et à imprimer dans le journal.

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

3
gagallo7

Placez les valeurs dont vous avez besoin à un endroit où l'autre script peut les récupérer, comme une entrée masquée, puis extrayez-les de leur conteneur lorsque vous initialisez votre nouveau script. Vous pouvez même mettre tous vos paramètres sous forme de chaîne JSON dans un champ caché.

2
bwest

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

<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
0
Eternal Darkness