动态生成含端口号的相对地址

在做本地服务器项目网址导航时，为了防止服务器ip变动，在html使用herf时的相对地址如： 

1
<a href=":8080" target="_top" class="main">Page</a>

期望能跳转到 服务器地址:8080 。但是返回的地址是 服务器地址/:8080 。多了一个/无法访问端口类的地址。
在 HTML 中使用相对地址时，如果直接写 :8080，浏览器会将其解释为一个路径，而不是端口号。这种情况会导致浏览器在 URL 前加一个 /，结果变成了 /:8080，从而无法访问。

如果希望用 <a id="my-link" href="7728">访问</a> 这种简单的写法，直接通过点击链接跳转到 服务器地址:7728，可以通过 JavaScript 在页面加载时动态修改 href 属性。

此外，还添加了关于是否访问https地址的判断。

  1. 在 HTML 中直接写多个类似 <a class="my-link" href="8080">访问端口 8080</a> 的链接：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <body>
       <a class="my-link" href="8080">访问端口 8080</a>
       <a class="my-link" href="443">访问端口 443</a>
       <a class="my-link" href="3000">访问端口 3000</a>
       <a class="my-link" href="8443">访问端口 8443</a>

       <script>
          document.addEventListener("DOMContentLoaded", function () {
                const serverAddress = window.location.hostname; // 获取当前服务器地址
                const protocol = window.location.protocol; // 获取当前页面协议（http: 或 https:）
                const links = document.querySelectorAll("a.my-link"); // 获取所有带 my-link 类的 <a> 标签

                // 定义需要使用 https 协议的端口号
                const httpsPorts = ['443', '8443'];  // 可以添加更多需要使用 https 的端口号

                links.forEach(link => {
                   const port = link.getAttribute("href"); // 获取当前 href 中的端口号

                   // 判断端口号是否在 httpsPorts 列表中，若是则使用 https 协议，否则使用 http 协议
                   const targetProtocol = httpsPorts.includes(port) ? 'https:' : 'http:';

                   link.href = `${targetProtocol}//${serverAddress}:${port}`; // 动态生成完整的链接
                });
          });
       </script>
    </body>

注：

一个 HTML 元素可以有多个 class。在这种情况下，多个 class 名称之间用空格分隔。
示例：

1
<a class="my-link active" href="5000">访问端口 5000</a>

在这个例子中，<a> 标签有两个 class，分别是 my-link 和 active。

  • my-link 可以用于标识这个链接，以便在 JavaScript 中进行操作。
  • active 可以用于给元素应用样式（比如为活动链接添加特殊样式）。