本文介绍如何使用纯前端 javascript 实现用户输入端口号后，自动跳转至同一域名下对应端口的 url，重点解决模板字符串误用、dom 元素 id 冲突及脚本执行时机等常见问题。

本文介绍如何使用纯前端 javascript 实现用户输入端口号后，自动跳转至同一域名下对应端口的 url，重点解决模板字符串误用、dom 元素 id 冲突及脚本执行时机等常见问题。

在 Web 开发中，有时需要让用户快速访问同一域名下不同端口的服务（例如本地开发环境中的 :3000、:8080 或测试 API 的 :5001）。虽然浏览器出于安全限制不允许跨端口直接发起某些请求，但页面重定向（window.location.href）是完全可行的——前提是目标地址协议合法、域名可达，且端口未被浏览器策略拦截（如非标准端口可能触发警告）。

Decktopus AI

Decktopus AI是一款面向商务演示和轮播内容的 AI 演示文稿生成工具。

下载

以下是一个完整、可立即运行的解决方案：

✅ 正确实现要点

• 表单与输入元素 ID 唯一且匹配：
  与 必须唯一，不可重复使用 myForm 作为 input 的 ID（原代码中 是严重错误）；
• 使用模板字符串（反引号 `）：${baseUrl}:${port} 必须用反引号包裹，单引号或双引号不支持变量插值；
• 脚本必须在 DOM 加载完成后执行：推荐将 <script> 放置于 </script>