如何实现JavaScript动态生成相对于HTML文档的资源路径，使脚本可跨项目复用

太懂这种头疼的情况了——想写一个通用的JS脚本，能在不同项目、不同层级的HTML里随便用，结果动态加载CSS这类资源时，相对路径总是乱套。尤其是不想给用你脚本的开发者加额外要求，比如必须加<base>标签或者定义全局变量，完全想靠纯JS解决对吧？

其实核心的破局点在于：不要依赖HTML的位置来构建资源路径，而是基于JS脚本自身的绝对路径来推导资源的绝对路径。这样不管HTML在项目的哪个目录下引用这个JS，都能精准定位到CSS文件，完全避开相对路径的坑。

具体实现思路&代码 #

这个方法全程纯JS，不需要使用者做任何额外配置，步骤如下：

1. 拿到当前JS脚本的绝对URL：JS可以通过自身的script标签获取到自己被加载的完整路径，这是关键。
2. 解析JS脚本所在的目录：从JS的绝对URL中提取出它所在的文件夹路径。
3. 结合已知的“CSS相对JS的路径”，生成CSS的绝对URL：既然你说JS知道CSS相对于自己的位置（比如../css/additional_styles.css），用这个相对路径和JS的目录结合，就能得到CSS的绝对路径。
4. 用绝对路径加载CSS：不管HTML在哪个位置，绝对路径永远不会出错。

完整可复用代码

// 1. 获取当前执行的JS脚本的绝对URL
let scriptUrl;
if (document.currentScript) {
  // 现代浏览器首选方案，直接获取当前执行的script元素
  scriptUrl = document.currentScript.src;
} else {
  // 兼容旧浏览器（比如IE11）：遍历所有script标签，取最后一个同步加载的脚本
  const allScripts = document.scripts;
  scriptUrl = allScripts[allScripts.length - 1].src;
}

// 2. 解析出JS脚本所在的目录（绝对路径）
const scriptDirectory = new URL('.', scriptUrl).href;

// 3. 定义CSS相对于JS脚本的路径（你已知的相对路径，比如这里是"../css/additional_styles.css"）
const cssPathRelativeToJs = '../css/additional_styles.css';

// 4. 生成CSS文件的绝对URL
const cssAbsoluteUrl = new URL(cssPathRelativeToJs, scriptDirectory).href;

// 5. 动态创建link标签加载CSS
const head = document.getElementsByTagName('head')[0];
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = cssAbsoluteUrl;
link.type = 'text/css'; // 可选，现代浏览器可省略
head.appendChild(link);

为什么这个方法安全可靠？ #

• 完全脱离HTML的位置限制：不管是根目录的index.html，还是子目录的collection/item1.html引用这个JS，最终加载CSS用的都是绝对URL，永远不会出现路径错误。
• 零额外配置成本：使用者只需要像正常引用JS脚本一样写<script src="js/script.js"></script>或者<script src="../my_library/js/script.js"></script>，不需要改任何HTML代码、加全局变量或<base>标签。
• 兼容绝大多数场景：现代浏览器用document.currentScript，旧浏览器用遍历脚本的降级方案，覆盖范围非常广。
• 项目无关性拉满：不管你的JS和CSS在项目里的相对层级是../css/还是./assets/css/，只要你正确设置cssPathRelativeToJs这个值，脚本就能在任何项目里正常工作。

测试你的两个项目场景 #

第一个项目结构

├─ index.html
├─ collection/item1.html
├─ css/additional_styles.css
└─ js/script.js

脚本会解析出script.js的绝对路径是http://你的域名/js/script.js，结合../css/additional_styles.css后，得到CSS的绝对URL是http://你的域名/css/additional_styles.css，两个HTML引用JS后都能正确加载CSS。

第二个项目结构

├─ index.html
├─ collection/item1.html
└─ my_library/
   ├─ css/additional_styles.css
   └─ js/script.js

脚本解析出script.js的绝对路径是http://你的域名/my_library/js/script.js，结合../css/additional_styles.css后，得到CSS的绝对URL是http://你的域名/my_library/css/additional_styles.css，同样所有HTML都能正确加载。

备注：内容来源于stack exchange，提问作者user2526586