最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如何在HTML中动态生成脚本URL以适配不同端口的静态资源服务
时间：2026-08-16 12:30:50 编辑：袖梨 来源：一聚教程网
本文介绍如何利用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">），会因同源策略失败——浏览器将尝试从当前Tomcat端口（8443）加载资源，而非Apache端口（9443）。
解决方案是在HTML中内联一段轻量JavaScript，动态生成指向正确端口的<script>标签，完全绕过静态HTML的局限性。核心逻辑基于window.location对象获取当前页面协议、主机名，并显式拼接目标端口与路径：
<!doctype html><html lang="tr" dir="ltr"><head><meta charset="utf-8"></head><body style="background-color:black;"><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"; // 静态资源路径// 动态构造完整URLconst 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></body></html>关键优势：
- 完全免硬编码：同一HTML可无缝部署于任意域名/端口的Tomcat实例；
- 端口可配置：只需修改
staticPort变量，即可切换至其他静态服务端口（如测试环境用8080）； - 兼容HTTPS/HTTP：自动继承当前页面协议，规避混合内容警告；
- 可扩展性强：
protocol、hostname、staticPort等变量可在后续加载的index.js中复用，用于动态引入其他资源（如CSS、字体、子模块JS）。
注意事项：
- 确保Apache已正确配置CORS头（如
Access-Control-Allow-Origin: *或指定域名），否则跨端口请求将被浏览器拦截； - 若需支持IPv6地址或特殊主机名（含端口），建议对
hostname做进一步校验； - 生产环境应添加错误处理，例如监听
script.onerror事件并降级提示； - 避免在
document.write()中动态写入script——它会阻塞解析且不推荐使用。
通过此方案，你无需修改任何后端配置或构建流程，仅用几行前端代码，即可实现静态资源服务的解耦与动态路由，显著提升多环境部署的灵活性与可维护性。