Dynamically loading JS script

JavaScript
1

Hi,

I am getting a parameter from the URL and based on that parameter, I want to load a different JS file. I tried everything I found on the web but I couldn’t make it work.

Here is my code:

// This line gets the parameter from the URL i.e. mypage.html?var=var1.
<script>var myVar = location.search.split('var=')[1];</script>

// This line is supposed to load the javascript file based on var parameter. If var is var1, it will load var1.js, if var is var2, it will load var2.js etc.
<script src="scripts/var1.js"></script>

I have both lines within <head> element. I need this to work locally, not on a server. I can’t use Ajax type of solution (I guess). For example, I tried the first 3 solutions on this page but they didn’t work for me.

2

This is what you need


myVar= location.search.split("var=").pop();
var addScript = document.createElement("script");
addScript.type = "text/javascript";
addScript.src = myVar;
(document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(addScript);
3

Thank you but it is not working for me. I am testing this by displaying a variable from var1.js on the main page but it is not displayed. Where do I put this code? Maybe the issue is something about page/script loading etc.?

Here is my whole setup with your code:

var1.js

var myVar = 'Test';

page2.html (you land on page2.html when you click “page1.html?var=var1”)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<script>
	var getVar= location.search.split('var=')[1];
	var addScript = document.createElement('script');
	addScript.src = getVar + '.js';
	(document.getElementsByTagName('head')[0] || document.documentElement ).appendChild(addScript);
	</script>
</head>
<body>
	<script>alert(myVar);</script>
</body>
</html>
4

In order to display a value in an alert, your script mush have run in order for it to produce a variable that has a value and can be displayed.

Something like this (untested and likely not working) would be the right direction to go in

displayIt = {
    init:function(){
        if( myVar ){
            clearInterval(auto);
            this.showMe();
        }
    },
    showMe:function(){
            alert( myVar );
    },
    auto:setInterval("displayIt.init()",2000)
}

What is meant to happen is the displayIt.init() function is called every 2 seconds until the variable is available to display, when it exists then the interval is cleared and then the displayIt.showMe() function is called and the alert causes the value of the JavaScript to show.

5

Also… why did you remove the

addScript.type = "text/javascript";

from your implementation?

6

Hi,

Isn’t there a way to just check if the script is fully loaded such as jquery’s ready feature? My purpose is not to display something with alert, I am using it to test if my code is working. I just want to use the code/variables in var1.js on my page when the page is loaded. I removed the above part because it is not necessary as far as I know. Thanks for your help.

7

You can test if the variable is ready through a routine a bit like I proposed which will be very similar to JQuery, however I personally don’t use JQuery, IMHO it is a completely wasteful resource given that you are suggesting that you want to load a few hundred lines of code to test if a variable is ready.

JavaScript (Which JQuery iw written in) uses the typeOf function to see if a variable is undefined or not.

I prefer KISS (Keep It Simple Stupid) philosophy here.

8

The simplest way to tell if a given script has loaded is to add a line at the end of that script that sets a variable with a value to indicate that it is loaded.

Better is to put all the JavaScript that is interdependent inside the one script so that other scripts don’t care whether that one has loaded or not as each is entirely self contained.

9

Thanks for all your help. I am not using jQuery just to test a variable, I’m using it for a lot of other things. I just want to dynamically load a javascript file and use the code/variables in it.

10

I want to use the code/variables contained in the dynamically loaded script in my main page, that’s my purpose.

11

[ot] If and only if the page was PHP and not HTML it would be a lot simpler:


<?php

/* 
  This line gets the parameter from the URL i.e. mypage.html?var=var1.
  This line is supposed to load the javascript file based on var parameter. 
  If var is var1, it will load var1.js, if var is var2, it will load var2.js etc.
*/

$jsFile = isset($_GET['var']) ? $_GET['var'] : 'jsDefault';

echo '<script src="scripts/' .$jsFile .'.js" type="text/javascript"></script>';

?>

[/ot]

12

Yeah, thank you. I know how to do it in PHP I just need in JS.

13

I finally found the solution and I am posting here in case someone else needs to dynamically load JS files. I have no idea why it didn’t work before when I tested.

var1.js

var myVar = 'Test';

page2.html (you land on page2.html when you click “page1.html?var=var1”)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<script>
	var getVar= location.search.split('var=')[1];
	document.write('<script src="' + getVar + '.js"><\\/script>'); // Don't forget to escape the forward slash in closing script tag.
	</script>
</head>
<body>
	<script>document.write(myVar);</script> // For testing if it works.
</body>
</html>

Thank you all once again for your input.

14

You could use the same JavaScript that jQuery uses yourself without using jQuery.

jQuery itself is written in JavaScript and so everything that jQuery can do has at least one native JavaScript equivalent.

15

Since the OP is already using jQuery for other things, it seems silly to avoid it.

@nayen Another option you could use:

$.getScript( getVar + ".js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );

  alert(myVar);
});
16

I don’t think the OP is using jQuery.

Actually, scrub that. Reading through the thread, it seems that he is.
Sorry for the noise.

17

This line left me with the impression that he is.

18

JQuery has a way of loading scripts dynamically, so why not use that instead of asking a JavaScript question?
https://api.jquery.com/jQuery.getScript/

19

I have my solution working now but thanks for the suggestion. Does that work locally (not on a server)?

20

Depends which browser.
It won’t work locally on Chrome.