电商网站快递追踪：iframe内显示或页面直接展示技术方案咨询

问题1：在本站iframe内显示追踪结果 #

可以实现，只需在页面中添加一个iframe容器，默认隐藏，提交表单时将追踪链接赋值给iframe的src属性并显示它即可。

修改后的HTML代码 #

<form id="shipment_tracking_form">
  <input type="text" placeholder="Tracking Number" name="track_no" id="shipment_tracking_no">
  <input type="submit" style="background-color:#EC0026; color :white; display:block; margin: 0 auto" value="Track!" id="shipment_tracking_submit">
</form>
<!-- 新增iframe容器 -->
<iframe id="tracking_iframe" style="display:none; width:100%; height:600px; border:none;" title="快递追踪结果"></iframe>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

修改后的JavaScript代码 #

document.getElementById("shipment_tracking_form").addEventListener("submit", function(event) {
  event.preventDefault();
  var track_no = document.getElementById("shipment_tracking_no").value.trim();
  if (!track_no) {
    swal("提示", "请输入追踪号", "warning");
    return;
  }
  var base_url = "https://sonic.pk/tracking?tracking_number=";
  var final_url = base_url + encodeURIComponent(track_no); // 对追踪号编码，避免特殊字符问题
  var iframe = document.getElementById("tracking_iframe");
  iframe.src = final_url;
  iframe.style.display = "block"; // 显示iframe
});

说明：

• 用encodeURIComponent对追踪号编码，防止特殊字符导致URL无效
• 默认隐藏iframe，提交后再显示，避免页面初始加载冗余内容
• 设置iframe的宽高和无边框，适配页面样式

问题2：直接在本站页面显示追踪结果（无需iframe/跳转） #

这个方案依赖快递服务商是否提供公开的API接口：

• 如果快递服务商（sonic.pk）提供了查询追踪信息的API，你可以通过AJAX请求获取数据，然后在自己的页面上自定义渲染结果，完全不用跳转或iframe。
• 如果没有公开API，无法直接获取原始追踪数据，这个方案无法实现，只能用iframe或跳转方式。

假设API存在的示例代码（仅作演示） #

如果sonic.pk提供类似https://sonic.pk/api/tracking?tracking_number=XXX的API接口，返回JSON格式数据，可以这样实现：

HTML新增结果容器

<form id="shipment_tracking_form">
  <input type="text" placeholder="Tracking Number" name="track_no" id="shipment_tracking_no">
  <input type="submit" style="background-color:#EC0026; color :white; display:block; margin: 0 auto" value="Track!" id="shipment_tracking_submit">
</form>
<!-- 新增结果展示容器 -->
<div id="tracking_result" style="margin-top:20px; display:none;"></div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

JavaScript代码

document.getElementById("shipment_tracking_form").addEventListener("submit", async function(event) {
  event.preventDefault();
  var track_no = document.getElementById("shipment_tracking_no").value.trim();
  if (!track_no) {
    swal("提示", "请输入追踪号", "warning");
    return;
  }
  
  var resultContainer = document.getElementById("tracking_result");
  resultContainer.style.display = "block";
  resultContainer.innerHTML = "<p>正在查询...</p>"; // 加载提示

  try {
    var apiUrl = `https://sonic.pk/api/tracking?tracking_number=${encodeURIComponent(track_no)}`;
    // 发起API请求
    var response = await fetch(apiUrl);
    if (!response.ok) throw new Error("查询失败");
    var trackingData = await response.json();

    // 自定义渲染结果（根据API返回的数据结构调整）
    var html = `
      <h3>追踪详情</h3>
      <p>追踪号：${trackingData.trackingNumber}</p>
      <p>当前状态：${trackingData.status}</p>
      <h4>物流轨迹</h4>
      <ul>
        ${trackingData.traces.map(trace => `<li>${trace.time} - ${trace.description}</li>`).join('')}
      </ul>
    `;
    resultContainer.innerHTML = html;
  } catch (error) {
    resultContainer.innerHTML = `<p style="color:red;">查询失败：${error.message}</p>`;
  }
});

说明：

• 实际使用时需要确认快递服务商的API文档，包括请求方式、参数、返回数据结构、是否需要授权等
• 如果API存在跨域限制，可能需要在你的后端做代理转发请求

内容的提问来源于stack exchange，提问作者Maddy1991