Use JS variable to set the src attribute for <script> tag

Question

I want to use a javascript variable as a 'src' attribute for another tag on the same jsp.

<script>
var link = mylink // the link is generated based on some code
</script>

I want to create this new element as shown below.

<script src="mylink">
</script>

On searching various forums, I have tried using the following options but they don't seem to work. I want this thing to work on all major browsers.

1. Put this code in the first element.

   var script   = document.createElement("script");
   script.type  = "text/javascript";
   script.src   = "path/to/somelink";
   document.body.appendChild(script);
   

2. Use document write method in the first element.

   document.write("<script type='text/javascript' src="+ google.com + "><\/script>");
   

3. Tried to set a JSTL Variable in the first element and use it.

   <c:set var="URL" value="mylink"/>
   

None of these ways were successful. Any suggestions on what is going wrong?

Answer 1

Though CDATA works fine, using document.createElement is also a great choice.. Especially if you intend to append some value to a URL, say for cache busting..

<script type="text/javascript"> 
    var JSLink = "/Folder/sub_folder/version.js?version=" + Math.random();
    var JSElement = document.createElement('script');
    JSElement.src = JSLink;
    JSElement.onload = OnceLoaded;
    document.getElementsByTagName('head')[0].appendChild(JSElement);

    function OnceLoaded() {
        // Once loaded.. load other JS or CSS or call objects of version.js
    }
</script>

Code well.. :)

Answer 2

I use something similar to choice two. There is a slight mistake in your code because "google.com" needs to be surrounded by quotes.

To improve compatibility, you might want to write it as:

document.write("<script type='text/javascript' src='"+ x + "'><\/scr" + "ipt>");

In this situation, x would be the file to be included. You can define it as:

var x = "http://google.com/script.js";

OR

var x = "path/to/script.js";

Answer 3

Are you able to use jQuery? If so you could use getScript():

http://api.jquery.com/jQuery.getScript/

$.getScript(mylink, function() {
   // do something using the JS that was loaded.
});

Answer 4

Try:

(function(d){
     var file = 'yourJS.js';
     var ref = d.getElementsByTagName('script')[0];
     var js = d.createElement('script');
     js.src = file;
     ref.parentNode.insertBefore(js, ref);
}(document));

What this does:

1. Find the first script element on your page
2. Creates a new script element with your supplied source.
3. Then inserts that new element before the first existing script element.

Answer 5

<xsl:variable name="Path" select="/root/folder/"></xsl:variable> <!-- Global path variable. -->
<xsl:variable name="myScriptPath" select="concat($Path, 'myScript.js')"></xsl:variable> <!-- Relative script path variable. -->
<script src="{$myScriptPath}"/> <!-- Attach script. -->