fetch动态注入HTML时为何无法自动加载引用的Vanilla JS模块？

正在构建小型模块化原生JS（Vanilla JS）单页应用，使用ES Modules实现代码模块化，项目目录结构如下：

/index.html
/index.js
/js
  └── mypage.js
/pages
  └── mypage.html

各文件初始代码如下：

pages/mypage.html #

<head>
    <script src="../js/mypage.js" type="module"></script>
</head>
<div>whatever content here</div>

js/mypage.js #

console.log('mypage module has loaded')

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./index.js" type="module"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

初始路由加载逻辑（index.js） #

通过fetch拉取页面片段，注入到#app容器实现页面切换：

const content = await fetch('/pages/mypage.html').then(data => data.text())
document.getElementById('app').innerHTML = content

问题表现 #

运行后mypage.html的内容可以成功注入到#app容器中，但mypage.js模块始终没有发起加载请求，浏览器网络面板无对应资源请求记录。
核心疑问：

• 出现该问题的根本原因是什么？
• 是否是浏览器运行机制决定JS模块仅在页面初始加载时统一解析，动态注入的模块脚本不会被自动识别加载？

核心原因和你判断的基本一致：通过innerHTML插入的HTML字符串中包含的<script>标签，浏览器默认不会解析执行，也不会发起对应资源请求，这和脚本是不是module类型无关，是浏览器内置的安全策略：

• 浏览器只有在初始解析HTML文档的阶段，才会自动识别、加载并执行页面中的script标签；
• 后续通过innerHTML、insertAdjacentHTML等API动态插入的HTML内容，其中内嵌、外链的所有script标签（包括普通脚本和ES模块脚本）都会被直接跳过，不会触发任何加载或执行逻辑。

另外你当前的mypage.html写法本身不符合DOM规范：<head>是文档级元数据容器，不能作为子元素插入到属于body流式内容的#appdiv内部，就算脚本能被解析，这种嵌套方式也会导致DOM结构异常。

根据项目需求选择对应实现即可：

• 推荐方案：模板与逻辑解耦（适配原生SPA架构）
  把mypage.html改成纯模板片段，去掉多余的<head>和script标签：

  <div>whatever content here</div>
  

  加载完模板注入DOM后，通过动态import加载对应页面的JS模块，这种方式也方便后续扩展路由缓存、页面生命周期等能力：

  const app = document.getElementById('app')
  // 加载页面模板
  const pageHtml = await fetch('/pages/mypage.html').then(res => res.text())
  app.innerHTML = pageHtml
  // 加载并执行页面对应的ES模块
  import('./js/mypage.js')
  

• 兼容现有写法的方案：手动重建脚本标签
  如果要保留页面片段内写script标签的习惯，可以在注入HTML后，遍历容器内所有被浏览器跳过的script标签，逐个重建标签后插入DOM触发执行，注意要保留原标签的所有属性（比如type="module"）：

  const app = document.getElementById('app')
  const pageHtml = await fetch('/pages/mypage.html').then(res => res.text())
  app.innerHTML = pageHtml
  // 重建所有script标签触发加载执行
  app.querySelectorAll('script').forEach(oldScript => {
    const newScript = document.createElement('script')
    // 复制原脚本的全部属性
    Array.from(oldScript.attributes).forEach(attr => {
      newScript.setAttribute(attr.name, attr.value)
    })
    // 复制内联脚本内容
    newScript.textContent = oldScript.textContent
    // 替换原标签，触发加载
    oldScript.replaceWith(newScript)
  })
  

内容的提问来源于stack exchange，提问作者NyxNight