如何通过 HTML 输入框动态跳转到指定端口的同一域名 URL

作者：袖梨 2026-07-31

本文介绍如何使用纯前端 JavaScript 实现：用户在输入框中填写端口号，点击提交后，自动跳转至当前域名 + 指定端口的完整 URL（如 mysite.com:1234），无需后端参与，适用于本地调试、微服务网关或内部管理界面等场景。

本文介绍如何使用纯前端 javascript 实现：用户在输入框中填写端口号，点击提交后，自动跳转至当前域名 + 指定端口的完整 url（如 `mysite.com:1234`），无需后端参与，适用于本地调试、微服务网关或内部管理界面等场景。

要实现“输入端口号 → 跳转到当前域名:端口”的功能，核心在于拦截表单默认提交行为，拼接合法 URL 并通过 window.location.href 触发重定向。以下是完整、健壮且可直接运行的解决方案：

✅ 正确实现代码（含校验与兼容性处理）

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>端口跳转工具</title></head><body>  <form id="myForm">    <input       type="number"       id="portNumber"       placeholder="请输入端口号（如 8080）"       min="1"       max="65535"       required    >    <input type="submit" value="Go →">  </form>  <script>    document.getElementById('myForm').addEventListener('submit', function(event) {      event.preventDefault();      const input = document.getElementById('portNumber');      const port = input.value.trim();      // 基础校验：非空、数字范围、整数      if (!port || isNaN(port) || port < 1 || port > 65535 || !Number.isInteger(Number(port))) {        alert('请输入有效的端口号（1–65535之间的整数）');        input.focus();        return;      }      // 构建目标 URL：复用当前页面协议 + 主机名 + 用户输入端口      const protocol = window.location.protocol; // 'http:' 或 'https:'      const host = window.location.hostname;      // 'mysite.com'      const targetUrl = `${protocol}//${host}:${port}`;      // 执行跳转      window.location.href = targetUrl;    });  </script></body></html>

? 关键要点说明

避免硬编码域名：使用 window.location.hostname 和 window.location.protocol 动态获取当前站点信息，确保部署到不同环境（如 dev.mysite.com、localhost:3000）时仍能正确跳转。
端口合法性校验：端口号必须为 1–65535 的整数，<input type="number"> 仅提供基础约束，JS 层需二次验证（如防止输入 8080.5 或负数）。
禁用默认提交：务必调用 event.preventDefault()，否则表单会按 action="" 发起无意义的 GET 请求。
安全提示：浏览器同源策略不会阻止跳转到其他端口（只要协议+域名相同），但目标端口需实际有服务监听，否则将显示连接失败页面（这是预期行为，非代码问题）。