Question

我想在下面的脚本代码中设置本地存储值。

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

我想设置存储/保存在本地存储中的文件路径。我想这样做

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

HTMl文件是我的应用程序索引文件

Answer 1

您可以使用HTMLScriptElement API。检查Dynamically importing scripts。我用他们的代码向您展示了如何做到这一点。

<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>

defer属性的一些背景知识..

对于经典脚本，如果存在async属性，则经典脚本将被并行提取以进行解析并在可用时立即进行评估（可能在解析完成之前）。如果async属性不存在但存在defer属性，则将并行获取经典脚本，并在页面完成解析时进行评估。如果两个属性都不存在，则立即获取并评估脚本，阻止解析直到这些都完成。

Answer 2

您可以使用DOMContentLoaded事件做一些简单的事情。

初始HTML文档一经完全加载和解析，就会加载事件触发器和脚本。

<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>

以下是关于如何动态加载脚本的更多内容

Dynamically load JS inside JS

以上脚本片段是从我个人用于网页的内容中获取/简化的，以支持旧浏览器。

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);
});

Answer 3

只需将id分配给脚本标记

即可

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

然后在body的onload方法中设置src的属性，如下面的代码。

<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>

如何在脚本标记中为src设置本地存储值

3 个答案: