How to set local storage value for src in script tag

Question

I want to set local storage value in bellow script code.

<html>
 <head>
    <script type="text/javascript" src="here I want to set file name"></script>
</head>
</html>

I want to set file path which is stored/saved in local storage. I Want to do like this

  <script type="text/javascript" src= localStorage.getItem('languageFilePath')>

the HTMl file is my index file of application

Why not append a `script` tag into the `head` and set the `src` attribute that way? — NewToJS, Mar 17 '18 at 07:10

Arup Rakshit · Answer 1 · 2018-03-17T07:38:04.663

You can use HTMLScriptElement API. Check the Dynamically importing scripts. I used their code to show you how you can do the same.

<html>
<head>
</head>
<body>
  <script type="text/javascript">
    function loadError (oError) {
      throw new URIError("The script " + oError.target.src + " is not accessible.");
    }

    function importScript (sSrc, fOnload) {
      var oScript = document.createElement("script");
      var oHead = document.head || document.getElementsByTagName("head")[0];

      oScript.type = "text\/javascript";
      oScript.onerror = loadError;
      if (fOnload) { oScript.onload = fOnload; }
      oHead.appendChild(oScript);
      oScript.src = sSrc;
      oScript.defer = true;
    }

    importScript(localStorage.getItem('languageFilePath'));
  </script>
</body>
</html>

A little background what defer attribute does..

For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.

Ason · Accepted Answer · 2018-03-17T07:56:39.200

You can do something as simple as this, using the DOMContentLoaded event.

As soon as the initial HTML document has been completely loaded and parsed, the event fire and your script will load.

<head>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var s = document.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('src', localStorage.getItem('languageFilePath'));
            document.getElementsByTagName('head')[0].appendChild(s);    
        })     
    </script>
</head>

Here is some more read on how to load script dynamically

Dynamically load JS inside JS

The above script fragment were taken/simplified from what I personally use for my web pages, to support older browsers as well.

var DomLoaded = {
    done: false, onload: [],
    loaded: function () {
        if (DomLoaded.done) return;
        DomLoaded.done = true;
        if (document.removeEventListener) { document.removeEventListener('DOMContentLoaded', DomLoaded.loaded, false); }
        for (i = 0; i < DomLoaded.onload.length; i++) DomLoaded.onload[i]();
    },
    load: function (fireThis) {
        this.onload.push(fireThis);
        if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', DomLoaded.loaded, false);
        } else {
            /*IE<=8*/
            if (/MSIE/i.test(navigator.userAgent) && !window.opera) {
                (function () {
                    try { document.body.doScroll('up'); return DomLoaded.loaded(); } catch (e) { }
                    if (/loaded|complete/.test(document.readyState)) return DomLoaded.loaded();
                    if (!DomLoaded.done) setTimeout(arguments.callee, 10);
                })();
            }
        }
        /* fallback */
        window.onload = DomLoaded.loaded;
    }
};

DomLoaded.load(function () {
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('async', true);
    s.setAttribute('defer', true);
    s.setAttribute('src', '/demo_files/script.js');
    document.getElementsByTagName('head')[0].appendChild(s);
});

score 0 · Answer 3 · answered Mar 17 '18 at 07:57

you can do simply by assigning id to script tag

<script type="text/javascript" id="script_tag">

and then set attribute of src in onload method of body, like below code.

<html>
  <head>
   <script type="text/javascript" id="script_tag"></script>
  </head> 

<body onload="assignData()">
 <script>
    function assignData() {
      document.getElementById('script_tag').setAttribute('src', 
        window.localStorage.getItem('languageFilePath'));
    }
</script>

How to set local storage value for src in script tag

3 Answers3