双击打开HTML文件时JavaScript不执行，是因为浏览器默认禁止file://协议下的fetch、XMLHttpRequest等操作；应使用python -m http.server等本地HTTP服务替代。
直接双击打开 HTML 文件时 JavaScript 不执行？
这是最常见的本地开发陷阱：浏览器出于安全策略，默认禁止 file:// 协议下部分 JS 行为，尤其是涉及 fetch、XMLHttpRequest、localStorage（某些版本）、Service Worker，甚至部分 DOM 操作（如读取本地文件路径）。不是 JS 被“禁用”，而是被限制——控制台通常报错：Access to script at 'file:///xxx.js' from origin 'null' has been blocked by CORS policy 或 Failed to load resource: net::ERR_FAILED。
- Chrome / Edge 默认严格限制
file://下的跨源请求和本地资源加载，哪怕 JS 文件和 HTML 在同一目录 - Firefox 略宽松，但
fetch('data.json')仍大概率失败 - 双击打开 ≠ 通过 HTTP 服务访问，二者权限模型完全不同
快速验证是否是协议问题：用 python -m http.server 启动本地服务
无需安装额外工具，Python 3 自带 HTTP 服务器。在 HTML 所在目录终端运行：
python -m http.server 8000
然后浏览器访问 http://localhost:8000/your-file.html。95% 的“JS 不工作”问题会立刻消失。
- 该命令默认绑定
localhost，不对外网开放，安全 - 端口可换（如
8001），避免冲突 - Windows 用户若提示
python不是内部命令，请改用py -3 -m http.server 8000 - macOS / Linux 用户确保当前 shell 在 HTML 文件所在目录
不用 Python？其他零配置替代方案
如果没装 Python，或想更轻量，这些命令行工具同样有效：
立即学习“Java免费学习笔记（深入）”；
-
npx serve（需已安装 Node.js）：自动找当前目录下index.html，或指定文件npx serve -s . -
npx http-server：支持 CORS 开关，调试 API 调用时加-c-1禁用缓存，--cors允许跨域 - VS Code 安装插件
Live Server：右键 HTML 文件 → “Open with Live Server”，一键启动并自动刷新
注意：所有这些方案本质都是提供 http:// 或 https:// 协议环境，绕过浏览器对 file:// 的硬性限制。
真要双击运行？只能降级兼容 + 避开敏感 API
极少数场景（如纯演示 PPT 式 HTML）必须双击打开，那就得主动适配限制：
- 把 JS 内联写进
<script>标签，避免外部<script src="xxx.js">加载失败 - 放弃
fetch读取本地 JSON；改用JSON.parse()直接内嵌数据，或用<script type="application/json">标签包裹数据 - 禁用依赖
localStorage的功能，或用 try/catch 包裹并降级到内存变量 - 不要尝试用
file://加载图片/CSS 外链——全部用相对路径且确保同目录，但 JS 逻辑仍可能因执行上下文受限而中断
这条路越走越窄，调试成本高，仅建议用于最终交付给完全不懂技术的用户、且功能极其简单的单页。
真正该花时间的，是养成习惯：本地开发永远走本地服务，而不是双击。浏览器对 file:// 的限制只会越来越严，这不是 bug，是设计。
