Passing parameters to JavaScript files

Question

Often I will have a JavaScript file that I want to use which requires certain variables be defined in my web page   So the code is something like this    lt script type  text javascript  src  file js  gt  lt  script gt   lt script type  text javascript  gt     var obj1    somevalue    lt  script gt    But what I want to do is    lt script type  text javascript        src  file js obj1 somevalue amp obj2 someothervalue  gt  lt  script gt    I tried different methods and the best one yet is to parse the query string like this   var scriptSrc   document getElementById  myscript   src toLowerCase      And then search for my values   I wonder if there is another way to do this without building a function to parse my string   Do you all know other methods

User · Answer

If you need a way that passes CSP check (which prohibits unsafe-inline) then you have to use nonce method to add a unique value to both the script and the CSP directive or write your values into the html and read them again.

Nonce method for express.js:

const uuidv4 = require('uuid/v4')

app.use(function (req, res, next) {
  res.locals.nonce = uuidv4()
  next()
})

app.use(csp({
  directives: {
    scriptSrc: [
      "'self'",
      (req, res) => `'nonce-${res.locals.nonce}'`  // 'nonce-614d9122-d5b0-4760-aecf-3a5d17cf0ac9'
    ]
  }
}))

app.use(function (req, res) {
  res.end(`<script nonce="${res.locals.nonce}">alert(1 + 1);</script>`)
})

or write values to html method. in this case using Jquery:

<div id="account" data-email="{{user.email}}"></div>
...


$(document).ready(() => {
    globalThis.EMAIL = $('#account').data('email');
}

User · Answer

You can pass parameters with arbitrary attributes  This works in all recent browsers    lt script type  text javascript  data-my var 1  some val 1  data-my var 2  some val 2  src   js somefile js  gt  lt  script gt    Inside somefile js you can get passed variables values this way             var this js script      script src  somefile        or better regexp to get the file name    var my var 1   this js script attr  data-my var 1       if  typeof my var 1      undefined         var my var 1    some default value     alert my var 1      to view the variable value  var my var 2   this js script attr  data-my var 2       if  typeof my var 2      undefined         var my var 2    some default value     alert my var 2      to view the variable value      etc

User · Answer

I d recommend not using global variables if possible  Use a namespace and OOP to pass your arguments through to an object   This code belongs in file js   var MYLIBRARY   MYLIBRARY     function        var  args          private      return           init   function Args                 args   Args                 some other initialising                    helloWorld   function                 alert  Hello World  -     args 0                             And in your html file    lt script type  text javascript  src  file js  gt  lt  script gt   lt script type  text javascript  gt     MYLIBRARY init   somevalue   1   controlId        MYLIBRARY helloWorld     lt  script gt

User · Answer

This can be easily done if you are using some Javascript framework like jQuery   Like so   var x      script first   attr  src      Fetch the source in the first script tag var params   x split      1     Get the params   Now you can use these params by splitting as your variable parameters   The same process can be done without any framework but will take some more lines of code

User · Answer

Another idea I came across was assigning an id to the  lt script gt  element and passing the arguments as data-  attributes   The resulting  lt script gt  tag would look something like this    lt script id  helper  data-name  helper  src  helper js  gt  lt  script gt    The script could then use the id to programmatically locate itself and parse the arguments   Given the previous  lt script gt  tag  the name could be retrieved like this   var name   document getElementById  helper   getAttribute  data-name      We get name   helper

User · Answer

No  you cant really do this by adding variables to the querystring portion of the JS file URL  If its writing the portion of code to parse the string that bothers you  perhaps another way would be to json encode your variables and put them in something like the rel attribute of the  tag  I don t know how valid this is in terms of HTML validation  if thats something you re very worried about  Then you just need to find the rel attribute of the script and then json decode that    eg   lt script type  text javascript  src  file js  rel    myvar   somevalue   anothervar   anothervalue    gt  lt  script gt

User · Answer

I think it is far more better and modern solution to just use localStorage on the page where the javascript is included and then just re-use it inside the javascript itself  Set it in localStorage with  localStorage setItem  quot nameOfVariable quot    quot some text value quot     and refer to it inside javascript file like  localStorage getItem  quot nameOfVariable quot

User · Answer

You use Global variables  -D   Like this    lt script type  text javascript  gt     var obj1    somevalue      var obj2    someothervalue    lt  script   lt script type  text javascript  src  file js  gt  lt  script  gt   The JavaScript code in  file js  can access to obj1 and obj2 without problem   EDIT Just want to add that if  file js  wants to check if obj1 and obj2 have even been declared you can use the following function   function IsDefined  Name        return  window  Name     undefined      Hope this helps

User · Answer

might be very simple  for example    lt script src  js myscript js id 123  gt  lt  script gt   lt script gt      var queryString      script src   js myscript js     attr  src   split      1    lt  script gt    You can then convert query string into json like below  var json     parseJSON                     queryString replace   amp  g         replace    g                                 and then can use like   console log json id

User · Answer

Nice question and creative answers but my suggetion is to make your methods paramterized and that should solve all your problems without any tricks   if you have function   function A         var val   external value from query string or global param      you can change this to   function B function param        var val   function param      I think this is most natural approach  you don t need to crate extra documentation about  file parameters  and you receive the same  This specially useful if you allow other developers to use your js file

User · Answer

It s not valid html  I don t think  but it seems to work if you create a custom attribute for the script tag in your webpage    lt script id  myScript  myCustomAttribute  some value       gt   Then access the custom attribute in the javascript   var myVar   document getElementById   myScript    getAttribute   myCustomAttribute      Not sure if this is better or worse than parsing the script source string

User · Answer

Although this question has been asked a while ago  it is still relevant as of today  This is not a trivial approach using script file params  but I already had some extreme use-cases that this way was most suited  I came across this post to find out a better solution than I wrote a while ago  with hope to find maybe a native feature or something similar  I will share my solution  up until a better one will be implemented  This works on most modern browsers  maybe even on older ones  didn t try  All the solutions above  are based on the fact that it has to be injected with predefined and well marked SCRIPT tag and rely completely on the HTML implementation  But  what if the script is injected dynamically  or even worse  what if you are write a library  that will be used in a variety of websites  In these and some other cases  all the above answers are not sufficient and even becoming too complicated  First  let s try to understand what do we need to achieve here  All we need to do is to get the URL of the script itself  from there it s a piece of cake  There is actually a nice trick to get the script URL from the script itself  One of the functionalities of the native Error class  is the ability to provide a stack trace of the  quot problematic location quot   including the exact file trace to the last call  In order to achieve this  I will use the stack property of the Error instance  that once created  will give the full stack trace  Here is how the magic works     The pattern to split each row in the stack trace string const STACK TRACE SPLIT PATTERN       Error   n    s at s         For browsers  like Chrome  IE  Edge and more  const STACK TRACE ROW PATTERN1         s         d   d          For browsers  like Firefox  Safari  some variants of Chrome and maybe other browsers  const STACK TRACE ROW PATTERN2                     d      d        const getFileParams        gt        const stack   new Error   stack      const row   stack split STACK TRACE SPLIT PATTERN  2  1       const    url    row match STACK TRACE ROW PATTERN1     row match STACK TRACE ROW PATTERN2             if   url            console warn  quot Something went wrong  You should debug it and find out why  quot            return            try           const urlObj   new URL url           return urlObj searchParams     This feature doesn t exists in IE  in this case you should use urlObj search and handle the query parsing by yourself        catch  e            console warn  The URL    url   is not valid              Now  in any case of script call  like in the OP case   lt script type  quot text javascript quot  src  quot file js obj1 somevalue amp obj2 someothervalue quot  gt  lt  script gt   In the file js script  you can now do  const params   getFileParams    console log params get  obj2        Prints  someothervalue  This will also work with RequireJS and other dynamically injected  file scripts

User · Answer

Check out this URL   It is working perfectly for the requirement   http   feather elektrum org book src html  Thanks a lot to the author  For quick reference I pasted the main logic below   var scripts   document getElementsByTagName  script    var myScript   scripts  scripts length - 1     var queryString   myScript src replace                    var params   parseQuery  queryString     function parseQuery   query       var Params   new Object       if     query   return Params     return empty object   var Pairs   query split     amp        for   var i   0  i  lt  Pairs length  i           var KeyVal   Pairs i  split           if     KeyVal    KeyVal length    2   continue      var key   unescape  KeyVal 0         var val   unescape  KeyVal 1         val   val replace     g            Params key    val        return Params

User · Answer

Here is a very rushed proof of concept   I m sure there are at least 2 places where there can be improvements  and I m also sure that this would not survive long in the wild  Any feedback to make it more presentable or usable is welcome   The key is setting an id for your script element  The only catch is that this means you can only call the script once since it looks for that ID to pull the query string  This could be fixed if  instead  the script loops through all query elements to see if any of them point to it  and if so  uses the last instance of such an script element  Anyway  on with the code   Script being called   window onload   function       Notice that both possible parameters are pre-defined    Which is probably not required if using proper object notation   in query string  or if variable-variables are possible in js  var header  var text     script gets the src attribute based on ID of page s script element  var requestURL   document getElementById  myScript   getAttribute  src       next use substring   to get querystring part of src var queryString   requestURL substring requestURL indexOf        1  requestURL length      Next split the querystring into array var params   queryString split   amp        Next loop through params for var i   0  i  lt  params length  i      var name    params i  substring 0 params i  indexOf         var value   params i  substring params i  indexOf        1  params i  length          Test if value is a number  If not  wrap value with quotes      if isNaN parseInt value        params i    params i  replace value        value                    Finally  use eval to set values of pre-defined variables   eval params i         Output to test that it worked  document getElementById  docTitle   innerHTML   header  document getElementById  docText   innerHTML   text       Script called via following page    lt script id  myScript  type  text javascript           src  test js header Test Page amp text This Works  gt  lt  script gt    lt h1 id  docTitle  gt  lt  h1 gt   lt p id  docText  gt  lt  p gt

User · Answer

Well  you could have the javascript file being built by any of the scripting languages  injecting your variables into the file on every request  You would have to tell your webserver to not dish out js-files statically  using mod rewrite would suffice    Be aware though that you lose any caching of these js-files as they are altered constantly   Bye

[javascript] Passing parameters to JavaScript files

Examples related to javascript

Examples related to parameter-passing