如何基于当前域名动态修改HTML中script标签src属性的端口？

核心思路 #

利用浏览器window.location对象获取当前页面的域名信息，动态替换端口为Apache服务器的9443，自动构造静态资源的完整URL，通过JavaScript动态创建<script>标签实现加载，彻底避免硬编码域名或端口。

修改后的Tomcat HTML页面代码 #

将原页面中静态的<script>标签替换为以下内联JavaScript代码：

<!doctype html>
<html lang="tr" dir="ltr">
<head>
    <meta charset=utf-8>
</head>
<body style="background-color:black;">
    <script>
        // 获取当前页面的源（域名+端口）
        const currentOrigin = window.location.origin;
        // 替换端口为Apache的9443（兼容任意端口的当前页面）
        const apacheOrigin = currentOrigin.replace(/:\d+$/, ':9443');
        // 构造目标JS文件的完整URL
        const targetJsUrl = `${apacheOrigin}/app-common/index.js`;

        // 动态创建script标签并插入页面
        const scriptTag = document.createElement('script');
        scriptTag.src = targetJsUrl;
        scriptTag.type = 'text/javascript';
        document.head.appendChild(scriptTag);
    </script>
</body>
</html>

代码说明 #

1. window.location.origin：自动获取当前页面的完整源地址（例如https://localhost:8443），适配任意域名环境，无需手动指定。
2. 正则替换端口：replace(/:\d+$/, ':9443')精准匹配地址末尾的端口部分，替换为Apache的9443端口，确保域名部分完全复用当前页面的配置。
3. 动态创建script标签：通过JavaScript生成并插入script标签，结合Apache已配置的CORS规则，实现跨端口静态资源的正常加载。

可选优化方案 #

如果需要兼容更复杂的URL格式，可使用URL对象进行更严谨的解析：

const currentUrl = new URL(window.location.href);
currentUrl.port = '9443';
const targetJsUrl = new URL('/app-common/index.js', currentUrl).href;

这种方式能自动处理各种URL边界情况，稳定性更强。

内容的提问来源于stack exchange，提问作者Tugalsan Karabacak