javascript - 在html中加载脚本序列-6ren

javascript - 在html中加载脚本序列

转载作者：行者123 更新时间：2023-11-30 13:50:50

我想根据用户选择的语言加载常量文件。为此，我想动态加载脚本。

<html>
  <body>
    <script type="text/javascript">
      var jsElement = document.createElement("script");
      jsElement.type = "application/javascript";
      jsElement.src = "../constants.en.js";
      document.body.appendChild(jsElement);
    </script>
    <script type="text/javascript" src="../js/RandomScript.js"></script>
  </body>

整个代码都在 HTML 中。

当我尝试上面的代码时，RandomScript.js 在常量文件之前加载。

如何维护加载文件的顺序。

我没有使用 jQuery 或其他东西，那么有什么方法可以对脚本的 src 进行插值吗？

最佳答案

您可以使用onload 事件监听器顺序加载.js 文件。

首先创建一个脚本 URL 数组。然后递归循环。 onload 事件监听器确保脚本按顺序加载。

var scriptURLs = [
   "../constants.en.js",
   "../js/RandomScript.js"
];

function loadScript(index){
  if(index >= scriptURLs.length){
    return false;
  }

  var el = document.createElement('script');
  el.onload = function(){
    console.log("Script loaded: ", scriptURLs[index]);
    loadScript(index+1);
  }
  el.src = scriptURLs[index];
  document.body.appendChild(el);
  // OR
  // document.head.appendChild(el);
}

loadScript(0); // Load the first script manually.