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

1985percy picture 1985percy · Jun 22, 2012 · Viewed 60.1k times · Source

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

Mahesh picture Mahesh · Mar 1, 2013

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.. :)