Add variables to a .js file

Question

I'm looking for a way to post variables in an external .js file.

Something like:

<script type="text/javascript" src="/js/script-starter.js?var=value"></script>

And then I'd like to call var (and thus, value). Is this possible in any way?

Thank you!

score 8 · Accepted Answer · edited May 23 '17 at 12:16

8

Yes, it is possible. You will have to look for all script tags in the DOM (make sure the DOM is loaded before attempting to look in it) using the document.getElementsByTagName function, loop through the resulting list, find the corresponding script and parse the src property in order to extract the value you are looking for.

Something along the lines of:

var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
    var src = scripts[i].src;
    // Now that you know the src you could test whether this is the script
    // that you are looking for (i.e. does it contain the script-starter.js string)
    // and if it does parse it.
}

As far as the parsing of the src attribute is concerned and extracting the query string values from it you may use the following function.

edited May 23 '17 at 12:16

Community

1
1

answered May 07 '12 at 20:31

Darin Dimitrov

1,023,142
271
3,287
2,928

3

Wow, +1. I was about to say it wasn't possible. – Elliot Bonneville May 07 '12 at 20:31
@Darin Dimitrov -> Well I think you mistook a very basic question of a beginner JavaScript programmer to be about some complicated stuff. I think he is only asking that " if he has a function foo(x, y) defined in a JS file fooFile.js then how can he call foo(5, 7) in his code.". So -> it is a very basic question and VisioN gave a basic correct answer. – sarveshseri May 07 '12 at 20:38
@SarveshKumarSingh, I don't see anything complicated in my answer. That's extremely basic javascript and DOM manipulation. It's one of the first things any javascript developer should learn before getting any further. – Darin Dimitrov May 07 '12 at 20:40
I never said that the stuff you mentioned is too complicated programming but only that sometimes experienced programmers like yourself can not understand what a novice programmer is asking about. Like here his whole purpose was probably to call a function defined in the external file with some parameters. – sarveshseri May 07 '12 at 20:43
@SarveshKumarSingh & Darin Dimitrov - thank you, I think you're both right. I do want to add some parameters to the url though, and not just calling a function from the external file with some parameters. I really need the parameters in the url. – Lourens May 07 '12 at 21:22

score 2 · Answer 2 · answered May 07 '12 at 20:32

2

it could be possible if that script is a serverside script that receives the variable in querystring and returns a javascript code as output

answered May 07 '12 at 20:32

Fabrizio Calderan

120,726
26
164
177

score 1 · Answer 3 · answered May 07 '12 at 20:33

1

How about declaring the variable before script file loading:

<script type="text/javascript">var myVar = "Value"</script>
<script type="text/javascript" src="/js/script-starter.js"></script>

So you can use this variable in your script. Possibly this is one of the easiest ways.

answered May 07 '12 at 20:33

VisioN

143,310
32
282
281

yeah that was my first choice as well, but I'd really like my javascript and html seperated.. really important for my client (can't tell him it's not worth the hassle).. – Lourens May 07 '12 at 22:00
Well, you still can separate HTML and JS but using global variables declared in the main page is quite normal. – VisioN May 07 '12 at 22:02

score 0 · Answer 4 · answered May 07 '12 at 20:33

Why don't you put the variables in a hidden a or p

<a id="myHiddenVar" style="display:none;">variables</a>

Then in your .js you access it with

var obj = document.getElementById("myHiddenVar").innerHTML;

or the jQuery style

var obj = $("#myHiddenVar").text();

score 0 · Answer 5 · answered May 07 '12 at 20:52

function getJSPassedVars(script_name, varName) {
    var scripts = $('script'),
        res = null;

    $.each(scripts, function() {
        var src = this.src;
        if(src.indexOf(script_name) >= 0) {
            varName = varName.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
            var string = new RegExp("[\\?&]"+ varName +"=([^&#]*)"),
                args = string.exec(src);
            if(!args.length) { 
                res = null; 
            } else { 
                res = args[1]; 
            }
        }
    });
    return res;
}

console.log(getJSPassedVars('script-starter.js', 'var'));

in my case my app folder structure is like following:

MyApp/
     index.html
     jquery.js
     my.js

above function is within my.js with console.log and include it within index.html.

Add variables to a .js file

5 Answers5