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

Question

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

 <script> document.addEventListener('DOMContentLoaded', function() { var script = document.createElement('script'); script.src = 'https://ajax.as.netcdn.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"];

然后遍历它，对于每个脚本，你可以像以前一样 append

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