本文介绍如何使用纯前端 JavaScript 实现：用户在输入框中填写端口号，点击提交后，自动重定向至当前域名 + 指定端口（如 mysite.com:1234），无需后端参与，适用于本地开发、内网服务或端口映射场景。
本文介绍如何使用纯前端 javascript 实现：用户在输入框中填写端口号，点击提交后，自动重定向至当前域名 + 指定端口（如 `mysite.com:1234`），无需后端参与，适用于本地开发、内网服务或端口映射场景。
要实现“输入端口号 → 跳转到 当前域名:端口”的功能，核心在于拦截表单默认提交行为，读取输入值，并拼接完整 URL 后通过 window.location.href 执行跳转。你提供的代码思路正确，但存在几处关键问题需修正：
✅ 正确实现步骤
- 确保 DOM 元素已加载：JavaScript 必须在
- 使用模板字符串（不是单引号）：${baseUrl}:${port} 需用反引号（`）包裹，否则变量不会解析；
- 协议必须显式声明：http:// 或 https:// 不可省略，否则浏览器会视为相对路径；
- 推荐使用 location.origin 动态获取当前协议+域名，避免硬编码，提升可移植性；
- 添加基础校验：防止空值或非法端口号（如负数、超范围值）导致无效跳转。
✅ 完整可运行代码示例
<!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.addEventListener('DOMContentLoaded', function() {
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
const portInput = document.getElementById('portNumber');
const port = portInput.value.trim();
// 基础校验
if (!port || isNaN(port) || port < 1 || port > 65535) {
alert('请输入有效的端口号（1–65535）');
return;
}
// ✅ 动态获取当前协议和主机名（如 https://mysite.com）
const baseUrl = window.location.origin;
const targetUrl = `${baseUrl}:${port}`;
// 可选：控制台输出用于调试
console.log('即将跳转至：', targetUrl);
// 执行跳转
window.location.href = targetUrl;
});
});
</script>
</body>
</html>⚠️ 注意事项与限制
- 跨域与安全策略：浏览器允许跳转到任意 host:port，但若目标端口未运行 HTTP 服务，页面将显示连接失败（如 ERR_CONNECTION_REFUSED），这是正常现象，由服务端决定，前端无法干预。
- HTTPS 环境下端口限制：部分浏览器对 https://domain:非443端口 的支持较弱，建议开发时优先使用 http:// 协议测试；生产环境如需 HTTPS 自定义端口，请确保服务器正确配置 TLS 证书并监听对应端口。
- 移动端兼容性： 在 iOS Safari 中可能触发数字键盘，体验良好；但需注意 min/max 属性在部分旧版 Android 浏览器中不生效，前端校验不可省略。
- 不要使用 method="POST"：表单跳转本质是 GET 请求，method 属性对 window.location.href 无影响，建议直接移除或设为 GET 以语义清晰。
✅ 总结
该方案轻量、零依赖、完全客户端执行，适合快速搭建内部调试入口页。只需一个
