如何在腳本標記中為src設置本地存儲值

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。 檢查動態導入腳本。 我用他們的代碼向您展示了如何做到這一點。

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

這是有關如何動態加載腳本的更多信息

在JS內部動態加載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 個解決方案

解決方案1
2 2018-03-17 07:11:37

解決方案2
2 已采納 2018-03-17 07:19:45

解決方案3
0 2018-03-17 07:57:54

如何在腳本標記中為src設置本地存儲值

問題描述

3 個解決方案

解決方案1 2 2018-03-17 07:11:37

解決方案2 2 已采納 2018-03-17 07:19:45

解決方案3 0 2018-03-17 07:57:54

解決方案1
2 2018-03-17 07:11:37

解決方案2
2 已采納 2018-03-17 07:19:45

解決方案3
0 2018-03-17 07:57:54