首先得明确：目前没有完全满足你所有要求的原生浏览器方案——因为Chrome和Firefox对file://协议的安全限制是出于保护本地文件系统的设计，原生并不支持在文件层面将整个目录标记为同源，除非你使用浏览器设置或本地服务器（而这两者都是你明确要避开的）。不过，有一个折中的替代方案，能最大程度贴合你的需求：

使用ES模块导入替代AJAX/fetch #

这个方法不需要服务器、浏览器命令行参数，所有文件都是独立可编辑的静态文件，且能在最新版Chrome和Firefox中直接生效。

具体步骤： #

1. 转换资源格式：
   • 如果你要加载的是JSON数据，把它改成ES模块文件（比如data.js），导出数据：

     export default {
       "key1": "value1",
       "key2": "value2"
     };
     

   • 如果你要加载的是文本内容，同样封装成模块：

     export default "这是要加载的文本内容";
     

2. 在主HTML中导入模块：
   • 在你的主HTML文件中，使用type="module"的脚本标签导入这些资源：

     <script type="module">
       // 导入同一目录或子目录下的资源
       import jsonData from './data.js';
       import textData from './subdir/text-content.js';
     
       // 现在可以直接使用这些数据，效果等同于AJAX获取到的内容
       console.log('JSON数据:', jsonData);
       console.log('文本内容:', textData);
     </script>
     

优点： #

• 完全符合你的要求：所有文件独立可编辑，无需打包，无需服务器或浏览器设置，支持最新Chrome和Firefox。
• 语法简洁，符合现代JS开发规范。

局限性： #

• 需要将非JS资源（如JSON、文本）转换为ES模块格式，不能直接加载原始的.json或.txt文件。
• 本质是模块导入而非AJAX/fetch调用，如果你的代码严重依赖XHR/fetch的API特性（比如请求头、异步回调的特定写法），需要做少量适配。

为什么其他方案不可行？ #

再补充说明一下你提到的其他方案被排除的原因，帮你确认选择：

• 浏览器设置/命令行参数：你已经明确不想用，而且这类方法需要用户修改浏览器配置，无法做到“直接生效”。
• 本地Web服务器：需要启动服务，不符合你“独立文件直接使用”的需求。
• 嵌入数据/data URI：会把资源打包进HTML或JS文件，不便于单独编辑。
• Electron应用：需要打包成应用程序，超出了静态网页的范畴。
• 归档格式（MHTML/MAFF）：如你所说，通用性差或已被弃用，且不便于编辑单个文件。

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