纯静态快递查询页只需HTML表单+JS跳转：用户输入单号→JS校验并编码→拼接各快递官网URL模板→window.location.href跳转；不调用API、不渲染假轨迹、不处理跨域，确保安全轻量可部署。
怎么用 HTML + 简单 JS 实现单页快递查询入口
纯静态 HTML 页面能做的快递查询，本质只是「把用户输入的单号，拼成目标快递官网的搜索链接跳转过去」——不调用任何 API，不后端，不存数据，也做不到实时查物流。这是最轻量、最安全、也最容易部署的方式。
常见错误是试图用 fetch 直接请求顺丰、中通等官网接口，结果被 CORS 拦截，或返回 403；也有直接在页面里写死 JSON 模拟物流数据的，那根本不是“查询”，只是展示假数据。
- 用户填单号 → 点查询 → 跳转到
https://www.sf-express.com/cn/zh/search/waybill?searchType=waybill&searchValue=123456789这类地址 - 所有快递公司都支持带单号参数的公开查询页，只需找对 URL 模板
- 前端只做表单收集和 URL 拼接，不碰跨域、认证、加密等复杂逻辑
怎么拼出主流快递的官方查询链接
每个快递官网 URL 结构不同，但规律明显：单号总是在 query 参数里，参数名可能是 searchValue、txtSearchKey、number 等。不能靠猜，得实测。
打开任意一家快递官网查单页（比如中通：https://www.zto.com/），手动输一个单号查一次，看地址栏最终跳转到哪——那个完整 URL 就是你要的模板。
立即学习“前端免费学习笔记（深入）”；
- 顺丰：
https://www.sf-express.com/cn/zh/search/waybill?searchType=waybill&searchValue=<font color="red">{单号}</font> - 中通：
https://www.zto.com/express/search?number=<font color="red">{单号}</font> - 圆通：
https://www.yto.net.cn/search?keyword=<font color="red">{单号}</font> - 申通：
https://www.sto.cn/search?txtSearchKey=<font color="red">{单号}</font> - 韵达：
https://www.yd100.com/#/mail/track?mailNo=<font color="red">{单号}</font>
注意：有些链接含 hash（如韵达），window.location.href 跳转完全支持；有些带路径参数（如中通），确保拼接时不要漏掉 /express/search 这段。
怎么防止用户乱输、空提交或粘贴多余空格
HTML 表单默认不做校验，用户点空查询，就会跳到一个带空参数的错误页（比如 ?number=），体验差，还可能被风控。
加几行 JS 就能解决，不用框架，原生即可：
document.querySelector('form').onsubmit = function(e) {
e.preventDefault();
const num = document.querySelector('input[name="nu"]').value.trim();
if (!num) {
alert('请输入快递单号');
return;
}
// 这里拼链接并跳转
window.location.href = 'https://www.zto.com/express/search?number=' + encodeURIComponent(num);
};
-
.trim()必须加，微信里长按粘贴常带首尾换行或空格 -
encodeURIComponent()必须加，单号若含字母、短横线、斜杠等特殊字符，不编码会破坏 URL - 别用
parseInt()或正则强行过滤——快递单号不是纯数字，像 SF123456789、YT123-456 都合法
为什么别自己写物流轨迹渲染逻辑
有人想“更完整”，在页面里再加个 <div id="result"></div>，然后用 JS 模拟查完显示“已签收”“派件中”。这反而误导用户：他以为真查了，其实只是你写的死文案。
真实场景下，用户需要的是可验证、可刷新、带官方单号溯源的页面。跳转过去，他能看到官网的物流地图、客服电话、投诉入口、电子面单图——这些静态页永远给不了。
真正需要自渲染轨迹的，是接入了快递 100、快递鸟等第三方 API 的后台系统，那必须有服务端做鉴权和中转。纯 HTML 页面没这个能力，也不该越界。
最简方案跑通的关键，是接受「跳转即服务」——用户离开你的页面，恰恰说明他进入了可信链路的下一环。
