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

Stack Overflow用户

提问于 2020-05-05 08:58:42

回答 1查看 90关注 0票数 4

在页面加载之后，我在超文本标记语言中使用了以下代码来加载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>

您在这方面的帮助将非常感谢。谢谢。

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-05 11:30:15

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

如果您想在没有模块加载器的情况下完成，那么您的想法是正确的。为了使代码更易读/更短，您可以创建一个urls数组，遍历它们，并为每个urls附加一个新的脚本元素。

    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);
    })

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61604074

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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