Javascript 在html中加载脚本序列_Javascript_Html

Javascript 在html中加载脚本序列

javascript html

Javascript 在html中加载脚本序列,javascript,html,Javascript,Html,我想根据用户选择的语言加载常量文件。为此，我希望动态加载脚本 <html> <body> <script type="text/javascript"> var jsElement = document.createElement("script"); jsElement.type = "application/javascript"; jsElement.src = "../constants.en.js";

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

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


var jsElement=document.createElement（“脚本”）；
jsElement.type=“应用程序/javascript”；
jsElement.src=“../constants.en.js”；
document.body.appendChild（jsElement）；

整个代码是HTML格式的

当我尝试上面的代码时，

RandomScript.js

在常量文件之前加载

如何维护加载文件的顺序

我没有使用jQuery或其他什么东西，所以有没有办法对脚本的

src

进行插值？

在加载

。/constants.en.js

后加载

。/js/RandomScript.js

，如下所示

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

      var script = document.createElement("script");
      script.src = "../js/RandomScript.js";
      script.type = "text/javascript";
      document.getElementsByTagName("head")[0].appendChild(script);

    </script>
  <!--  <script type="text/javascript" src="../js/RandomScript.js"></script> -->
</body>


var jsElement=document.createElement（“脚本”）；
jsElement.type=“应用程序/javascript”；
jsElement.src=“../constants.en.js”；
document.body.appendChild（jsElement）；
var script=document.createElement（“脚本”）；
script.src=“../js/RandomScript.js”；
script.type=“text/javascript”；
document.getElementsByTagName（“head”）[0].appendChild（脚本）；

您可以使用

onload

事件侦听器按顺序加载

.js

文件

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.

首先创建脚本的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.

希望这能有所帮助。

如果

常量.en.js

是一个比

RandomScript.js

更大的文件，那么可能会重复什么？如果它更大，它将稍后加载。这并不能确保加载顺序。如果添加了很多脚本，比如RandomScript.js文件，该怎么办。我应该这样加载吗？只有代码的答案被认为是低质量的：确保提供一个解释，说明你的代码是什么，以及它是如何解决问题的。如果有那么多像randomScript这样直接加载的脚本呢。我是否应该将所有脚本的src设置为数组并以这种方式加载？如果您希望以特定顺序加载其他脚本，使用这种方法，您唯一需要的就是在数组中按顺序添加URL。但是如果你不介意加载顺序，你可以直接加载。@CHIRAGBAVISHI通常我不喜欢这样做，但因为你是一名新的投稿人，我想请你投票并将答案标记为接受。这样，未来的读者将有机会快速找到自己问题的答案。祝您有愉快的一天。但是在加载文件之前调用ajax，因为文件太多了。很抱歉，我不能完全理解它。您能提供一个像plunker或stackblitz这样的用例示例吗？

var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
document.body.appendChild(jsElement);

jsElement.onload = () => {
    callyournewScript();
}

jsElement.src = "../constants.en.js";