如何在HTML中动态生成脚本URL以适配不同端口的静态资源服务-html教程-PHP中文网

如何在HTML中动态生成脚本URL以适配不同端口的静态资源服务

本文介绍如何利用window.location对象动态构建跨端口静态资源（如JS文件）的加载路径，避免硬编码域名和端口，实现Apache（9443）与Tomcat（8443）混合部署下的灵活资源引用。

本文介绍如何利用window.location对象动态构建跨端口静态资源（如js文件）的加载路径，避免硬编码域名和端口，实现apache（9443）与tomcat（8443）混合部署下的灵活资源引用。

在前后端分离或动静分离架构中，常将静态资源（JS、CSS、字体等）托管于独立Web服务器（如Apache），而动态应用运行于应用服务器（如Tomcat）。当两者监听不同HTTPS端口（如Apache:9443、Tomcat:8443）时，HTML页面若直接通过相对路径引用静态脚本（如<script src="../app-common/index.js"></script>），会因同源策略失败——浏览器将尝试从当前Tomcat端口（8443）加载资源，而非Apache端口（9443）。

解决方案是在HTML中内联一段轻量JavaScript，动态生成指向正确端口的<script></script>标签，完全绕过静态HTML的局限性。核心逻辑基于window.location对象获取当前页面协议、主机名，并显式拼接目标端口与路径：


<meta charset="utf-8"><script>
    // 从当前页面URL提取基础信息
    const protocol = window.location.protocol.replace(/:$/, ''); // 如 "https"
    const hostname = window.location.hostname;                  // 如 "localhost"
    const staticPort = 9443;                                    // Apache静态服务端口
    const staticPath = "app-common/index.js";                   // 静态资源路径

    // 动态构造完整URL
    const scriptSrc = `${protocol}://${hostname}:${staticPort}/${staticPath}`;

    // 创建并插入script标签
    const script = document.createElement('script');
    script.src = scriptSrc;
    script.type = 'text/javascript';
    document.head.appendChild(script); // 推荐插入head，避免阻塞body渲染
  </script>

✅ 关键优势：

html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

完全免硬编码：同一HTML可无缝部署于任意域名/端口的Tomcat实例；

端口可配置：只需修改staticPort变量，即可切换至其他静态服务端口（如测试环境用8080）；

兼容HTTPS/HTTP：自动继承当前页面协议，规避混合内容警告；

可扩展性强：protocol、hostname、staticPort等变量可在后续加载的index.js中复用，用于动态引入其他资源（如CSS、字体、子模块JS）。