HTML 本身不能主动获取物流信息，必须依赖后端API调用或前端JavaScript配合可信物流接口实现动态跟踪，纯HTML仅能静态展示，无法实时更新。
直接说结论：HTML 本身不能主动获取物流信息，所谓“插入物流跟踪信息”本质是前端展示 + 后端或第三方 API 接入，纯 HTML 文件里硬写 <iframe></iframe> 或静态文本等于假跟踪。
为什么不能只用 HTML 实现物流跟踪
HTML 是标记语言，不执行逻辑、不发起网络请求、无法读取订单号或调用快递公司接口。你看到的“实时更新”页面，背后一定有 JavaScript 调用 API，或服务端（PHP/Node.js/Python）拉取数据后渲染。
常见错误现象：
– 把快递官网的查询页 <iframe src="https://www.sf-express.com/cn/sc/dynamic_function/waybill/#/search"></iframe> 嵌进自己页面，结果被 X-Frame-Options 拦截，显示空白或报错
– 在 HTML 里写死一段文字如 已签收（2024-05-20 14:32），用户刷新页面也不会变，和真实物流脱节
怎么让订单页真正显示动态物流状态
必须走「前端 JS + 可信物流 API」或「服务端代查 + 渲染」两条路。推荐后者，更可控、不暴露 API Key、避免跨域问题。
立即学习“前端免费学习笔记（深入）”；
- 用订单号作为唯一标识，服务端（比如 Node.js 的
express）接收请求后，调用快递鸟、快递100 或官方开放平台（如中通/api/v1/track）API - 返回结构化 JSON（含时间、地点、状态、描述），再注入到 HTML 模板中，例如用
res.render('order', { logistics: data }) - 前端只负责渲染，比如遍历
logistics.list生成时间轴，不用自己拼 URL 或解析非标准响应 - 注意：快递100 免费版有调用频次限制（
1000次/天），且部分公司（如顺丰丰桥）需企业认证才能查全量轨迹
如果非要前端 JS 直接查，该怎么写才不翻车
仅限测试或低频场景，且必须选支持 CORS 的聚合接口（如快递100 的 https://www.kuaidi100.com/query），别碰官网接口。
关键点：
- 请求地址必须带
type（如sf）、postid（单号），例如：https://www.kuaidi100.com/query?type=sf&postid=SF123456789CN - 响应是 JSONP 格式，得用
callback参数配合<script></script>标签动态加载，不能用fetch直接 GET（会跨域） - 别在 HTML 里明文写 API Key —— 快递100 免费接口不需要 Key，但商用接口若需要，必须由后端代理，否则 Key 泄露风险极高
- 加兜底：网络失败或查无结果时，显示
物流信息获取中…而不是留空或报TypeError: data.data is undefined
电商订单页嵌入时最易忽略的细节
不是“能显示”就行，而是“用户真能看懂、信得过、不误判”。
- 状态文案必须和快递公司一致：用
派件中不用正在送货，用疑难件不用出问题了，否则客服压力翻倍 - 时间字段统一转为本地时区并格式化，避免后端返回
"2024-05-20T06:22:11+00:00"直接贴上页面 - 单号超链接要指向可验证的页面，比如顺丰单号生成
https://www.sf-express.com/cn/sc/dynamic_function/waybill/#/search?number=SF123456789CN，而不是随便跳转 - 移动端折叠长轨迹：超过 5 条记录默认收起，点“展开详情”再渲染，不然页面拖到底都看不到商品信息
物流状态看着简单，但每一步都卡在「谁查、怎么查、查完怎么信、用户怎么看明白」这四个环节上。少一个，就是假跟踪。
