在页面加载后加载多个脚本？

Question

我在HTML中使用了以下代码，在页面加载后加载一个JS文件。(DOMContentLoaded)

<script>
document.addEventListener('DOMContentLoaded', function() {
  var script = document.createElement('script');
  script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
  document.getElementsByTagName('body')[0].appendChild(script);
});
</script>

但是我有几个脚本要加载，我不知道怎么做才是最好的方式。例如，我有以下文件要链接。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

任何帮助将是非常感激的。

Answer 1

如果你事先知道脚本的名字，你可以定义一个数组，比如。

var scripts = ["script1.js", "anotherscript.js", "whatever.js"];

然后在数组中循环，对于每一个脚本，你可以像之前一样追加它。

var scriptName;
for (scriptName in scripts) {
  // create the script and set the src = scriptName as before
}