如何在不修改HTML原文件情况下加载时注入JS文件且无需启动服务

实现方案（纯前端无服务、无需修改index.htm） #

核心思路是通过同目录下的loader.htm作为入口，打开index.htm新窗口后动态注入对应mock文件，完全符合需求：

1. 核心逻辑说明 #

所有文件（loader.htm、index.htm、所有mock js文件）放在同一个本地目录下，点击loader.htm的按钮时，打开index.htm新窗口，待目标页面加载完成后，直接操作新窗口的DOM，插入对应mock文件的script标签即可。

2. 完整代码示例（loader.htm） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>测试用例加载器</title>
</head>
<body>
  <!-- 测试用例按钮支持批量生成无需手写 -->
  <button class="mock-btn" data-mock="mock_001.js">测试用例1</button>
  <button class="mock-btn" data-mock="mock_002.js">测试用例2</button>
  <!-- 批量生成100个按钮的示例逻辑：
  <script>
    for(let i=1;i<=100;i++) {
      const btn = document.createElement('button')
      btn.className = 'mock-btn'
      btn.dataset.mock = `mock_${String(i).padStart(3, '0')}.js`
      btn.textContent = `测试用例${i}`
      document.body.appendChild(btn)
    }
  </script>
  -->

  <script>
    const mockBtns = document.querySelectorAll('.mock-btn')
    mockBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        // 取当前按钮对应的mock文件名
        const mockFile = btn.dataset.mock
        // 打开index.htm新窗口
        const targetPage = window.open('index.htm', '_blank')
        // 监听目标页面加载完成事件
        targetPage.addEventListener('load', () => {
          // 创建注入用的script标签
          const injectScript = targetPage.document.createElement('script')
          injectScript.src = mockFile
          // 插入到body末尾
          targetPage.document.body.appendChild(injectScript)
        })
      })
    })
  </script>
</body>
</html>

3. 浏览器兼容处理 #

如果Chrome下操作提示跨域，两种解决方案：

• 更换Firefox浏览器运行，Firefox默认允许同目录本地文件的父子窗口DOM操作
• 给Chrome添加启动参数--allow-file-access-from-files后再运行，适合固定测试环境

提示：如果需要mock代码更早执行，可将监听的load事件替换为DOMContentLoaded，可以在页面DOM解析完成后就立即注入mock代码，避免生产代码先执行导致的替换失效。

4. 参数化说明 #

mock文件名完全支持参数化，只要在按钮的data-mock属性中配置对应mock文件的名称即可，支持任意命名规则的mock文件，无需修改核心逻辑。

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