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

Question

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

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

非常感谢您的帮助。谢谢。

- Gihan

---

你可以看一下RequireJS。它是一个JavaScript文件和模块加载器。RequireJS是什么以及如何使用它。 - Florent Roques

我同意Florent的观点，有一些库可以为您管理这个问题。否则，如果您认为那太过复杂，只需要在此处执行此操作，我不确定我是否理解了这个问题。您不能只使用循环来迭代每个“src”路径并编写其他“script”标记吗？ - Alexander Nied

Answer 1

正如评论中所提到的，您可以考虑使用模块加载器。

如果你不想使用模块加载器，那么你的想法是正确的。为了使代码更易读/更短，您可以创建一个URL数组并遍历它们，并为每个 URL 添加一个新的脚本元素。

    const jsFiles = [
        'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
        'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js',
        'https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js',
        'https://cdn.jsdelivr.net/npm/sweetalert2@8'
    ]
    jsFiles.forEach((item) => {
        const scriptEle = document.createElement('script');
        scriptEle.src = item;
        document.head.appendChild(scriptEle);
    })

- nrayburn-tech

---

除非我漏掉了什么，否则它似乎工作得很好？https://jsfiddle.net/nrayburn/nq871yob/5/ - nrayburn-tech