Passing javascript arguments via script src attribute

Question

If i have a javascript src like

<script src="http://domain.com/js/script.js">

Could i add some more values to the end of it

<script src="http://domain.com/js/script.js?state=1">

And get state inside that javascript ??

This idea came from a situation that i have to get client resolution and save it to a session but i can not take it by php , so i have to get it by javascript, but i dont want to show the script nuded from the source code

I think it is possible because i saw many of sources do have link like this!

Why do you have to pass the resolution to the script? Can't the script calculate it when needed? — JJJ, Jul 08 '13 at 16:31
Any time I have added a query string parameter to a script source it has been a time-stamp or version to prevent caching. — Jeremy Gallant, Jul 08 '13 at 16:32
When I need to give parameters, i normally make a PHP file (header as text/javascript) which `$_GET` the values and outputs the formatted js file : ``. But the `?` values on a js is what Jeremy said, of timestamp or version, to prevent cache. — RaphaelDDL, Jul 08 '13 at 16:33
Why does JavaScript decide which CSS file to use? Wouldn't it be simpler to just include the correct CSS file with PHP? — JJJ, Jul 08 '13 at 16:34
This is possible, see [Passing JavaScript arguments via the src attribute](http://feather.elektrum.org/book/src.html) for details — Matt, Jul 08 '13 at 16:32
When an HTML file uses a Script tag that has a query string to call a JavaScript program, you cannot use location.search to retrieve the query string, because location does not contain the URL. The URL can be obtained using "new URL(here.src).search", where "here" is the string you use in the Script id attribute. — David Spector, Sep 12 '20 at 20:56

score 12 · Answer 1 · edited Oct 10 '18 at 22:28

12

just in case someone wants the actual answer to the actual question instead of resorting to global variables and two script tags:

<script src="http://example.com/js/script.js?state=1"></script>

inside script.js:

(function(){
  var myTags = document.getElementsByTagName("script");
  var src = myTags[myTags.length-1].src;
  var state = unescape(src).split("state=")[1].split("&")[0];
  alert(state);
}());

if you need to pass a lot of stuff, use a common queryString parser to turn the script's queryString into an object.

edited Oct 10 '18 at 22:28

dhilt

18,707
8
70
85

answered Jul 08 '13 at 17:49

dandavis

16,370
5
40
36

1

I know this is two years old, but it works perfectly with my 1-line widget include that I am building. It requires a user ID which I can now pass without cluttering up the global namespace. +1 – jrounsav May 26 '15 at 21:45
2

@Cluckles: know that newer browsers support the `document.currentScript` property, which makes the "guts" of the function boil down to `state=unescape(document.currentScript.src).split("state=")[1].split("&")[0]` – dandavis May 26 '15 at 22:47
Thank you @dandavis a shorter version is: `var src = document.currentScript.src; var url = new URL(src); url.searchParams.get('state');` – Ali Alwash Oct 10 '18 at 20:54

score 4 · Accepted Answer · answered Jul 08 '13 at 16:32

4

Cant you do something like this?

<script>
    var state = 1;
</script>
<script src="http://domain.com/js/script.js">

answered Jul 08 '13 at 16:32

bmorenate

963
1
8
18

Ah, thanks! How can i forget this !!! – Tin Nguyen Jul 08 '13 at 16:37
I agree with dandavis. This does not answer the question. Sure, it solves their problem in their case. But the question they asked was something different. – RoboticRenaissance Dec 07 '16 at 19:16

score 1 · Answer 3 · answered Jul 08 '13 at 16:38

Give variable before calling JS will work. But if you don't want to pollute Global with vars, you can try the PHP approach:

Make a PHP file declaring in the header it will be a javascript, do whatever you want with the variable grabbing it with $_GET the values and outputs the formatted js file with

<script src="http://domain.com/js/script.php?state=1" />

<?php
// We'll be outputting a JS
header('Content-type: text/javascript');

$phpState = $_GET['state'];
?>

function someCommonJS(){
    var myState = "<?=$phpState;?>"; /*printing php var into js*/
}

<?php
/* some more php*/
?>

/*some more js*/

This way the file comes as you want, without user being able to see all your if else that would be visible if done via js.

Passing javascript arguments via script src attribute

3 Answers3