javascript - Hur skickar man parametrar till en Script-tagg?

Jag läste handledningen DIY-widgets - Hur man bäddar in din webbplats på en annan webbplats för XSS-widgets av Dr. Nic.

Jag letar efter ett sätt att skicka parametrar till script-taggen. Till exempel, för att få följande att fungera:

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

Finns det ett sätt att göra detta?

Två intressanta länkar:

  • Hur man bäddar in ett Javascript-widget som är beroende av jQuery i en okänd miljö (Stackoverflow-diskussion)
  • En artikel om att skicka parametrar till en script-tagg

Svar #1

Jag ber om ursäkt för att jag svarar på en supergammal fråga men efter att ha kämpat med lösningarna ovan i en timme valde jag enklare saker.

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

Inuti ovanstående skript:

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

Mycket enklare än jQuery eller URL-parsing.

Du kan behöva polyfillen för document.currentScript från @Yared Rodriguez:s svar för IE:

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

Svar #2

Det är bättre att använda funktioner i HTML5 dataattribut

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

Inuti skriptfilen http://path.to/widget.js kan du få parametrarna på det sättet:

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

Svar #3

Ett annat sätt är att använda meta-taggar. All data som ska skickas till din JavaScript kan tilldelas på detta sätt:

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

Datan kan sedan hämtas från meta-taggarna på detta sätt (bäst görs i en DOMContentLoaded-händelsehanterare):

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

Absolut inget krångel med jQuery eller liknande, inga hack och lösningar nödvändiga, och fungerar med vilken HTML-version som helst som stöder metataggar...

Svar #4

Förstått. Lite av en lösning, men den fungerar ganska bra:

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

Jag skickar parametrarna i script-taggen som klasser:

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

Den här artikeln hjälpte mycket.

Svar #5

JQuery har ett sätt att skicka parametrar från HTML till JavaScript:

Sätt detta i myhtml.html-filen:

<!-- 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>

I samma katalog, skapa en subscript.js-fil och lägg detta där:

//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);

Analysera Resultat:

Att ladda sidan myhtml.html har 'foobar.mp4' utskrivet på skärmen. Variabeln som kallas video_filename skickades från html till javascript. Javascript skrev ut den på skärmen, och den visades som inbäddad i html i föräldern.

jsfiddle bevis att ovanstående fungerar:

http://jsfiddle.net/xqr77dLt/

Svar #6

Skapa ett attribut som innehåller en lista över parametrarna, på följande sätt:

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

Sedan, i din JavaScript, hämta parametrarna som en array:

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

Relaterade artiklar