基于追踪号实现动态页面跳转的前端解决方案

✅ 正确实现方式：移除表单，绑定按钮点击事件

首先，将原

<div class="container">
  <div class="row">
    <div class="col-md-7 col-sm-7">
      <div class="form-group">
        <input id="trackingID" type="text" 
               placeholder="Enter your product ID" 
               required 
               class="form-control box-shadow">
      </div>
    </div>
    <div class="col-md-5 col-sm-5">
      <div class="form-group">
        <button id="trackBtn" class="btn btn-primary">Track your product</button>
      </div>
    </div>
  </div>
</div>

接着，在页面底部（或 <script> 标签内）注入核心跳转逻辑：</script>

Runwayml（AI painting）

Runway 平台的文本生成图像AI工具

下载

document.addEventListener("DOMContentLoaded", () => {
  const trackBtn = document.querySelector("#trackBtn");
  const trackingInput = document.querySelector("#trackingID");

  trackBtn.addEventListener("click", () => {
    const trackingID = trackingInput.value.trim();

    // 基础校验：长度与非空
    if (!trackingID || trackingID.length < 2) {
      alert("⚠️ Please enter a valid tracking ID (minimum 2 characters).");
      trackingInput.focus();
      return;
    }

    // 构建目标路径（支持 .html 或 .php；可根据实际部署调整）
    const targetPage = `${trackingID}.html`; // 或 `${trackingID}.php`

    // 尝试跳转，并优雅降级处理 404
    try {
      // 使用 assign 避免历史栈污染（等效于 window.location.href = ...）
      window.location.assign(targetPage);
    } catch (err) {
      console.warn("Navigation failed:", err);
      alert(`Tracking ID "${trackingID}" not found. Please check or contact support.`);
    }
  });

  // 支持回车键触发（提升用户体验）
  trackingInput.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      trackBtn.click();
    }
  });
});

⚠️ 重要注意事项

• 服务器配置必须支持直接访问静态文件：确保 Web 服务器（如 Apache/Nginx）允许 .html（或 .php）文件被公开访问，且无重写规则拦截该路径。
• 404 处理不可省略：当前方案依赖浏览器原生跳转，若目标文件不存在，用户将看到服务器返回的 404 页面。建议：
  • 在服务端配置统一 404 页面，提示“Tracking ID not found”并提供返回入口；
  • 或进阶方案：用 fetch() 预检文件是否存在（需服务端开启 CORS），再决定是否跳转（注意跨域限制）。
• 安全提醒：此方案适用于可信 ID 场景（如预生成的追踪页）。若 ID 来源不可控，需防范路径遍历（如输入 ../etc/passwd）——可通过正则严格限定 ID 格式（例如仅数字/字母）：

  if (!/^[a-zA-Z0-9]{2,20}$/.test(trackingID)) {
    alert("Invalid characters detected. Only letters and numbers allowed.");
    return;
  }

• SEO 与可访问性：静态页面本身利于 SEO；为保障无障碍体验，请确保 有 label 关联，按钮具备明确 aria-label。

✅ 总结

该方案以最小侵入方式解决“ID → 页面”映射需求：零后端依赖、零表单提交、兼容主流浏览器，并通过输入校验、回车支持、错误提示显著提升用户体验。只需确保文件命名与部署路径一致，即可开箱即用——让每一个追踪号，都成为通往专属页面的快捷入口。

立即学习“前端免费学习笔记（深入）”；