本文介绍如何在不部署远程服务器的前提下，在 iphone 上高效创建、编辑、运行和调试轻量级 html+js 测试页面，解决现场设备联调中移动性与脚本执行限制的双重挑战。
本文介绍如何在不部署远程服务器的前提下，在 iphone 上高效创建、编辑、运行和调试轻量级 html+js 测试页面，解决现场设备联调中移动性与脚本执行限制的双重挑战。
在工厂巡检等移动测试场景中，开发者常需快速提交表单、调用 Web API 或监听设备响应，而携带笔记本电脑既笨重又低效。理想方案是：仅用一部 iPhone，即可本地编写 HTML+JS 页面、即时运行、执行 XHR 请求、反复修改——全程离线、无需发布、不依赖生产环境。遗憾的是，iOS 系统对 file:// 协议有严格限制：Safari 及绝大多数第三方浏览器（包括 Chrome、Firefox for iOS）默认禁止从本地文件加载的 JavaScript 执行 XMLHttpRequest、fetch()、localStorage 等关键 API，且不支持直接编辑并保存 .html 文件。
✅ 可行路径：绕过 file:// 限制，启用 http://localhost 服务
核心思路是——不在“本地文件”上运行，而在“本地 HTTP 服务”上运行。这样既保持完全离线、零部署，又能获得完整 Web API 权限（CORS 问题也自然消失，因请求同源于 localhost）。
✅ 推荐方案：使用 iOS 原生支持的轻量 HTTP 服务器 App
目前最稳定、免越狱、操作最简的方案是使用专为 iOS 设计的本地 Web 服务器应用，例如：
- Working Copy + iA Writer（配合 WebDAV 或 Git 同步）
- 更直接的选择：Server Auditor 或 nHTTPd（后者为开源轻量服务器，支持单页 HTML 托管）
但最成熟、广泛验证的组合是：
? Textastic Code Editor + 内置 HTTP Server（v9.0+ 版本原生支持）
- 安装 Textastic（付费，但一次购买永久使用，支持 iPad/iPhone）；
- 新建一个 .html 文件（如 test-form.html），粘贴以下最小测试示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备调试表单</title>
<style>body { font-family: -apple-system; padding: 16px; }</style>
</head>
<body>
<h2>实时指令发送器</h2>
<input type="text" id="cmd" placeholder="输入指令（如: START, STOP）" value="START">
<button onclick="sendCommand()">发送</button>
<pre class="brush:php;toolbar:false;" id="log">→ 就绪
<script>
async function sendCommand() {
const cmd = document.getElementById('cmd').value.trim();
const log = document.getElementById('log');
log.textContent = `→ 发送中... ${cmd}`;
try {
// ✅ 在 localhost 下可正常跨域（实际指向你自己的后端）
const res = await fetch('https://your-api.example.com/api/v1/control', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ command: cmd })
});
const data = await res.json();
log.textContent = `✓ 响应: ${JSON.stringify(data)}`;
} catch (err) {
log.textContent = `✗ 错误: ${err.message}`;
}
}
</script> 
