如何在页面加载时控制多个脚本的执行？

前端开发 2026-07-11

在我的应用中，我有一些脚本，分为通用的和页面特定的。

<head>
   <script type="text/javascript" src="/javascripts/menu.js"></script>
   <script type="module" src="/javascripts/index.js"></script>
</head>

# menu.js, loaded on each page
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector(".navbar-menu").addEventListener('click', () => {
    ...
  });
})

# index.js, page specific

const { httpConstants, some more } = (await axios.get('/some-data')).data;

document.addEventListener('DOMContentLoaded', () => {
   ... do other stuff for this side

})

第二部分显然从未被执行，DOMContentLoaded 只会被触发一次。

在此之前我使用jQuery，jQuery(function () {... 可以多次触发，这没问题。

在原生JavaScript中该怎么实现？如何确保第二个脚本在DOM完全加载后再运行？

我的第一个想法是在第一部分的末尾放置 dispatchEvent(new Event('DOMContentLoaded'))。但是随后出现了错误 InternalError: too much recursion。

解决方案

答案是在评论区的讨论中找到的。

由于

const { httpConstants, some more } = (await axios.get('/some-data')).data;

对 DOMContentLoaded 的事件监听器是在事件已经分发之后才添加的。

在这种情况下，解决方案很简单：我把所有脚本改为 type="module"，它实现了延迟加载，DOMContentLoaded 事件因此不再需要。

当然还有其他解决方案，例如

document.addEventListener('DOMContentLoaded', () => {
   ... do other stuff for this side

});

const { httpConstants, some more } = (await axios.get('/some-data')).data;

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。