Pass vars to JavaScript via the SRC attribute

Question

In my HTML file I have linked to the JS with:

src="myscript.js?config=true"

Can my JS directly read the value of this var like this?

alert (config);

This does not work, and the FireFox Error Console says "config is not defined". How do I read the vars passed via the src attribute in the JS file? Is it this simple?

The correct way to pass parameters to js script https://stackoverflow.com/a/70570839/836723 — Maksim Shamihulau, Jan 03 '22 at 20:06

score 19 · Accepted Answer · edited Jun 19 '09 at 11:19

19

<script>
var config=true;
</script>
<script src="myscript.js"></script>

You can't pass variables to JS the way you tried. SCRIPT tag does not create a Window object (which has a query string), and it is not server side code.

edited Jun 19 '09 at 11:19

Matthew Flaschen

278,309
50
514
539

answered Jun 19 '09 at 11:16

Itay Moav -Malimovka

52,579
61
190
278

1

Good alternative, though it does not answer my question :) – Robin Rodricks Jun 19 '09 at 11:33
8

Yes it does: Question "Can my JS directly read the value of this var like this?" Answer "You can't passe variables to JS the way you tried" – Benjol Jun 19 '09 at 12:13
Although, the src attr can point to a php (or any other server side tech) and accomplish this. – Itay Moav -Malimovka Jul 18 '15 at 15:58
Security people and CSP seem to want us never to us inline JavaScript. – David Spector Jun 26 '21 at 14:44

score 6 · Answer 2 · answered Jun 19 '09 at 11:26

Yes, you can, but you need to know the exact script file name in the script :

var libFileName = 'myscript.js',
    scripts = document.head.getElementsByTagName("script"), 
    i, j, src, parts, basePath, options = {};

for (i = 0; i < scripts.length; i++) {
  src = scripts[i].src;
  if (src.indexOf(libFileName) != -1) {
    parts = src.split('?');
    basePath = parts[0].replace(libFileName, '');
    if (parts[1]) {
      var opt = parts[1].split('&');
      for (j = opt.length-1; j >= 0; --j) {
        var pair = opt[j].split('=');
        options[pair[0]] = pair[1];
      }
    }
    break;
  }
}

You have now an 'options' variable which has the arguments passed. I didn't test it, I changed it a little from http://code.google.com/p/canvas-text/source/browse/trunk/canvas.text.js where it works.

I'm struggling to think of a real-world use case where this would be more beneficial than Itay Moav's answer. — Andy E, Jun 19 '09 at 11:31
In order to make a script easier to integrate. Personnaly I find it easier to pass a few http parameters (which aren't really ones) than having to declare a few variables in another script tag. — Fabien Ménager, Jun 19 '09 at 11:42

score 4 · Answer 3 · answered Jun 19 '09 at 11:25

4

You might have seen this done, but really the JS file is being preprocessed server side using PHP or some other language first. The server side code will print/echo the javascript with the variables set. I've seen a scripted ad service do this before, and it made me look into seeing if it can be done with plain ol' js, but it can't.

answered Jun 19 '09 at 11:25

Andy E

338,112
86
474
445

This is also how JSONP (http://en.wikipedia.org/wiki/JSONP#JSONP) works. You pass the name of a function, and the server echoes it in the body. – Matthew Flaschen Jun 20 '09 at 08:51
Indeed, as JSONP is handled by a server-side language such as PHP or ASP. – Andy E Jun 22 '09 at 11:34

score 4 · Answer 4 · answered Jun 19 '09 at 11:26

You need to use Javascript to find the src attribute of the script and parse the variables after the '?'. Using the Prototype.js framework, it looks something like this:

var js = /myscript\.js(\?.*)?$/; // regex to match .js

var jsfile = $$('head script[src]').findAll(function(s) {
    return s.src.match(js);
}).each(function(s) {
    var path = s.src.replace(js, ''),
    includes = s.src.match(/\?.*([a-z,]*)/);
    config = (includes ? includes[1].split('=');
    alert(config[1]); // should alert "true" ??
});

My Javascript/RegEx skills are rusty, but that's the general idea. Ripped straight from the scriptaculous.js file!

score 1 · Answer 5 · answered Jun 19 '09 at 11:28

1

Your script can however locate its own script node and examine the src attribute and extract whatever information you like.

  var scripts = document.getElementsByTagName ('script');
  for (var s, i = scripts.length; i && (s = scripts[--i]);) {
    if ((s = s.getAttribute ('src')) && (s = s.match (/^(.*)myscript.js(\?\s*(.+))?\s*/))) {
      alert ("Parameter string : '" + s[3] + "'");    
      break;
    } 
  }

answered Jun 19 '09 at 11:28

HBP

15,685
6
28
34

1

Wouldn't it be much simpler to give the script tag an ID and in it use document.getElementById ? – Itay Moav -Malimovka Jun 19 '09 at 11:43
Yes if you are the author of both the script and the web page calling it. My code fragment came from a generic library file and I do not want its users to have to use an id with the subsequent issues if it were specified incorrectly. – HBP Jun 19 '09 at 17:04

score 0 · Answer 6 · answered Oct 23 '17 at 08:17

Using global variables is not a so clean or safe solution, instead you can use the data-X attributes, it is cleaner and safer:

<script type="text/javascript" data-parameter_1="value_1" ... src="/js/myfile.js"></script>

From myfile.js you can access the data parameters, for instance with jQuery:

var parameter1 = $('script[src*="myfile.js"]').data('parameter_1');

Obviously "myfile.is" and "parameter_1" have to match in the 2 sources ;)

score 0 · Answer 7 · edited May 23 '17 at 12:30

Whether or not this SHOULD be done, is a fair question, but if you want to do it, http://feather.elektrum.org/book/src.html really shows how. Assuming your browser blocks when rendering script tags (currently true, but may not be future proof), the script in question is always the last script on the page up to that point.

Then using some framework and plugin like jQuery and http://plugins.jquery.com/project/parseQuery this becomes pretty trivial. Surprised there's not a plugin for it yet.

Somewhat related is John Resig's degrading script tags, but that runs code AFTER the external script, not as part of the initialization: http://ejohn.org/blog/degrading-script-tags/

Credits: Passing parameters to JavaScript files , Passing parameters to JavaScript files

score 0 · Answer 8 · answered Mar 27 '20 at 13:25

0

You can do that with a single line code:

new URL($('script').filter((a, b, c) => b.src.includes('myScript.js'))[0].src).searchParams.get("config")

answered Mar 27 '20 at 13:25

Oğuzhan Türk

360
2
9
21

score 0 · Answer 9 · answered Jun 26 '21 at 15:07

0

It's simpler if you pass arguments without names, just like function calls.

In HTML:

<script src="abc.js" data-args="a,b"></script>

Then, in JavaScript:

const args=document.currentScript.dataset.args.split(',');

Now args contains the array ['a','b'].

answered Jun 26 '21 at 15:07

David Spector

1,520
15
21

Pass vars to JavaScript via the SRC attribute

9 Answers9

Linked

Related