本文介绍如何使用纯前端 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 请求。
- 安全提示：浏览器同源策略不会阻止跳转到其他端口（只要协议+域名相同），但目标端口需实际有服务监听，否则将显示连接失败页面（这是预期行为，非代码问题）。
⚠️ 常见错误规避
- ❌ 错误写法：action=":" 或 action="javascript:void(0)" —— 这些无法传递端口值，纯属冗余；
- ❌ 字符串模板错误：'${baseUrl}:${port}' 是字符串字面量，不会解析变量；必须用反引号（`）包裹才能启用模板字符串；
- ❌ 协议拼写陷阱：示例中故意写成 h--ps:// 是因平台过滤，实际应为 https:；生产环境请始终使用 location.protocol 自动适配。
? 扩展建议
如需支持自定义路径（如 mysite.com:3000/api），可在表单中增加路径输入框，并拼接为 ${protocol}//${host}:${port}${path}；若需 HTTPS 强制跳转，可将 protocol 替换为 'https:'（注意末尾冒号）。
该方案轻量、零依赖、跨浏览器兼容（IE11+），是前端快速构建端口路由入口的理想实践。
