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

时间：2026-07-31 17:40:48 编辑：袖梨来源：一聚教程网

本文介绍如何使用纯前端 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+），是前端快速构建端口路由入口的理想实践。

推荐专题

最新下载

热门教程

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

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

? 关键要点说明

⚠️ 常见错误规避

? 扩展建议

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程