safari 直接打开 html 文件只渲染不运行 js 是因 webkit 对 file:// 协议实施严格安全限制，必须通过 http 协议（如 server for php、codeapp 预览或 pythonista 启动本地服务器）才能正常执行脚本、加载资源和使用 api。
直接用Safari打开HTML文件为什么只渲染不运行JS？
因为 Safari 对 file:// 协议施加了严格限制：本地脚本无法读取同目录下的 style.css 或 script.js，AJAX 请求会触发跨域错误，localStorage 可能被禁用，甚至 fetch('./data.json') 直接抛 TypeError: Network request failed。这不是 bug，是 iOS/iPadOS 的 WebKit 安全策略——它把本地文件当“不可信来源”处理。
常见现象包括：alert() 能弹，但 fetch 失败；CSS 文件 404；控制台报 Not allowed to load local resource；点击按钮无反应但控制台没报错（JS 被静默拦截）。
解决思路只有一条：绕过 file://，让 HTML 走 HTTP 协议。
用 Server for PHP 启动本地服务器最省事
这是目前 iPad 上启动 HTTP 服务门槛最低的方案，无需命令行、不依赖 Python 环境，且支持多文件项目结构。
- 在 App Store 安装
Server for PHP（免费，2026 年仍持续更新） - 把整个 HTML 项目文件夹（含
index.html、css/、js/）通过“文件”App 拖进该 App 的文档目录 - 点右上角 ▶️ 启动服务，记下显示的地址，通常是
http://localhost:8080或http://192.168.x.x:8080 - 在 Safari 中访问该地址，此时所有相对路径、AJAX、
localStorage全部正常
注意：Server for PHP 默认根目录是它自己的 Documents，别误传到 iCloud Drive 根目录；如果页面空白，检查 Safari 地址栏是否仍是 file:// 开头——必须手动输入 http:// 地址。
CodeApp 或 Textastic 里写代码+预览，适合单文件调试
这两款 App 内置实时预览引擎，不走网络，而是用 WKWebView 渲染当前文件，对纯 HTML/CSS/JS 小项目足够快，且能看源码、改即显。
-
CodeApp免费，语法高亮好，长按文件可“以文本方式打开”，点右上角 ?️ 进预览模式 -
Textastic Code Editor支持 FTP/SFTP 和多标签，但预览需手动刷新（Cmd+R），更适合带后端联调的场景 - 二者都支持
<script></script>内联 JS 执行，但外部<script src="xxx.js"></script>在预览模式下可能失败——它们不是 HTTP 服务器，只是封装了 WebView
适合场景：改一段动画、试一个表单验证、快速验证 CSS Grid 布局。不适合含 fetch、WebSocket 或引用大量外部资源的项目。
用快捷指令自动启动 Python HTTP 服务（需 Pythonista）
如果你已安装 Pythonista（支持 Python 3.12，2026 年仍活跃），可以用一行命令起服务，比图形化工具更可控。
操作步骤：
- 把项目文件放进
Pythonista的Documents文件夹 - 新建脚本，内容为：
import http.server, socketserver; PORT = 8000; with socketserver.TCPServer(("", PORT), http.server.SimpleHTTPRequestHandler) as httpd: httpd.serve_forever() - 运行脚本，终端会输出
Serving at 0.0.0.0:8000 - Safari 访问
http://localhost:8000/index.html
关键细节：SimpleHTTPRequestHandler 默认启用目录列表，所以你访问 http://localhost:8000/ 能看到所有文件；但它不解析 .htaccess，也不支持 PHP，纯静态服务。如果遇到 CORS 报错，说明你 JS 里写了跨域请求——这时得换用 http.server 的子类或改用 Server for PHP。
真正卡住多数人的不是“怎么运行”，而是混淆了“查看渲染结果”和“执行完整网页环境”。iPad 上没有双击即运行的桌面级体验，file:// 是死胡同，HTTP 是唯一活路。选工具前先想清：你要看源码、要调试交互、还是要测 AJAX？答案不同，路径完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
