How to pass parameters to a Script tag

Question

I read the tutorial DIY widgets - How to embed your site on another site for XSS Widgets by Dr  Nic     I m looking for a way to pass parameters to the script tag  For example  to make the following work    lt script src  http   path to widget js param a 1 amp amp param b 3  gt  lt  script gt    Is there a way to do this     Two interesting links    How to embed Javascript widget that depends on jQuery into an unknown environment  Stackoverflow discussion  An article on passing parameters to a script tag

User · Answer

It s better to Use feature in html5 5 data Attributes    lt script src  http   path to widget js  data-width  200  data-height  200  gt   lt  script gt    Inside the script file http   path to widget js you can get the paremeters in that way    lt script gt  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                   lt  script gt

User · Answer

it is a very old thread  I know but this might help too if somebody gets here once they search for a solution   Basically I used the document currentScript to get the  element from where my code is running and I filter using the name of the variable I am looking for  I did it extending currentScript with a method called  get   so we will be able to fetch the value inside that script by using   document currentScript get  get variable name      In this way we can use standard URI to retrieve the variables without adding special attributes    This is the final code  document currentScript get   function variable        if variable  new RegExp     amp    encodeURIComponent variable        amp        exec this src       return decodeURIComponent variable 1         I was forgetting about IE    It could not be that easier    Well I did not mention that document currentScript is a HTML5 property  It has not been included for different versions of IE  I tested until IE11  and it was not there yet   For IE compatibility  I added this portion to the code   document currentScript   document currentScript     function       var scripts   document getElementsByTagName  script      return scripts scripts length - 1           What we are doing here is to define some alternative code for IE  which returns the current script object  which is required in the solution to extract parameters from the src property  This is not the perfect solution for IE since there are some limitations  If the script is loaded asynchronously  Newer browsers should include   currentScript  property    I hope it helps

User · Answer

Thanks to the jQuery  a simple HTML5 compliant solution is to create an extra HTML tag  like div  to store the data   HTML    lt div id  dataDiv  data-arg1  content1  data-arg2  content2  gt     lt button id  clickButton  gt Click me lt  button gt   lt  div gt    JavaScript     document  ready function         var fetchData       dataDiv   data  arg1                              dataDiv   data  arg2              clickButton   click function           console log fetchData                Live demo with the code above  http   codepen io anon pen KzzNmQ editors 1011 0  On the live demo  one can see the data from HTML5 data-  attributes to be concatenated and printed to the log   Source  https   api jquery com data

User · Answer

Put the values you need someplace where the other script can retrieve them  like a hidden input  and then pull those values from their container when you initialize your new script  You could even put all your params as a JSON string into one hidden field

User · Answer

If you are using jquery you might want to consider their data method    I have used something similar to what you are trying in your response but like this    lt script src  http   path to widget js  param a    2  param b    5  param c    4  gt   lt  script gt    You could also create a function that lets you grab the GET params directly  this is what I frequently use    function   GET q s        s   s    window location search      var re   new RegExp   amp   q       amp       i        return  s s replace         amp    match re     s s 1    s           Grab the GET param var param a     GET  param a

User · Answer

I wanted solutions with as much support of old browsers as possible  Otherwise I d say either the currentScript or the data attributes method would be most stylish   This is the only of these methods not brought up here yet  Particularly  if for some reason you have great amounts of data  then the best option might be   localStorage     On the original page  you add an inline JS Script      lt script gt     localStorage setItem  data-1    I got a lot of data        localStorage setItem  data-2    More of my data        localStorage setItem  data-3    Even more data      lt  script gt      External target JS Script  where your data is needed     var data1   localStorage getItem  data-1    var data2   localStorage getItem  data-2    var data3   localStorage getItem  data-3      localStorage has full modern browser support  and surprisingly good support of older browsers too  back to IE 8  Firefox 3 5 and Safari 4  eleven years back  among others   If you don t have a lot of data  but still want extensive browser support  maybe the best option is   Meta tags  by Robidu      HTML      lt meta name  yourData  content  Your data is here    gt      JS     var data1   document getElementsByName  yourData   0  content    The flaw of this  is that the correct place to put meta tags  up until HTML 4  is in the head tag  and you might not want this data up there  To avoid that  or putting meta tags in body  you could use a   Hidden paragraph     HTML      lt p hidden id  yourData  gt Your data is here lt  p gt      JS     var yourData   document getElementById  yourData   innerHTML    For even more browser support  you could use a CSS class instead of the hidden attribute      CSS      hidden      display  none        HTML      lt p class  hidden  id  yourData  gt Your data is here lt  p gt

User · Answer

JQuery has a way to pass parameters from HTML to javascript   Put this in the myhtml html file    lt  -- Import javascript -- gt   lt script src    code jquery com jquery-1 11 2 min js  gt  lt  script gt   lt  -- Invoke a different javascript file called subscript js -- gt   lt script id  myscript  src  subscript js  video filename  foobar mp4  gt  script gt    In the same directory make a subscript js file and put this in there     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     Analyze Result   Loading the myhtml html page has  foobar mp4  print to screen   The variable called video filename was passed from html to javascript   Javascript printed it to screen  and it appeared as embedded into the html in the parent   jsfiddle proof that the above works   http   jsfiddle net xqr77dLt

User · Answer

This is the Solution for jQuery 3 4  lt script src  quot   js util js quot  data-m  quot myParam quot  gt  lt  script gt     document  ready function          var m      script data-m  data-m  null    attr  data-m

User · Answer

Create an attribute that contains a list of the parameters  like so    lt script src  http   path to widget js  data-params  1  3  gt  lt  script gt    Then  in your JavaScript  get the parameters as an array   var script   document currentScript       Polyfill   Array prototype slice call document getElementsByTagName  script    pop     var params    script getAttribute  data-params          split          params 0      - gt  1 params 1      - gt  3

User · Answer

Got it  Kind of a hack  but it works pretty nice   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     I pass the params in the script tag as classes    lt script src  http   path to widget js  class  2 5 4  gt  lt  script gt    This article helped a lot

User · Answer

I apologise for replying to a super old question but after spending an hour wrestling with the above solutions I opted for simpler stuff    lt script src      one  1  two  2  gt  lt  script gt    Inside above script   document currentScript getAttribute  one      1 document currentScript getAttribute  two      2   Much easier than jquery OR url parsing    You might need the polyfil for doucment currentScript from  Yared Rodriguez s answer for IE   document currentScript   document currentScript     function       var scripts   document getElementsByTagName  script      return scripts scripts length - 1

User · Answer

Another way is to use meta tags  Whatever data is supposed to be passed to your JavaScript can be assigned like this    lt meta name  yourdata  content  whatever    gt   lt meta name  moredata  content  more of this    gt    The data can then be pulled from the meta tags like this  best done in a DOMContentLoaded event handler    var data1   document getElementsByName  yourdata   0  content  var data2   document getElementsByName  moredata   0  content    Absolutely no hassle with jQuery or the likes  no hacks and workarounds necessary  and works with any HTML version that supports meta tags

[javascript] How to pass parameters to a Script tag?

Examples related to javascript

Examples related to parameters

Examples related to widget

Examples related to xss

Examples related to script-tag