[英]How Can I Load Multiple Scripts After Page Has Loaded?
我在 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.as.netcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script> <script src="https://ajax.as.netcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
非常感谢您对此的帮助。 谢谢。
如评论中所述,您可以考虑使用模块加载器。
如果你想在没有模块加载器的情况下做到这一点,那么你的想法是对的。 为了使代码更易于阅读/更短,您可以创建一个 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);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.