JavaScript相对文件路径失效：子目录页面CSS加载异常

问题分析 #

这个问题我之前也踩过坑！核心原因是相对路径在不同层级页面的解析规则不一致：

• 根目录页面（http://example.com/index.html）里的css/a1tg2.css，会被浏览器解析为http://example.com/css/a1tg2.css，正好匹配文件的实际位置；
• 但子目录页面（http://example.com/other/index.html）里的同一段路径，会被解析为http://example.com/other/css/a1tg2.css，自然找不到正确的CSS文件。

3种可行解决方案 #

1. 改用绝对路径加载CSS

最直接的办法是给CSS路径加上根目录斜杠，强制浏览器从网站根目录开始查找文件：

var cb = function() { 
  var l = document.createElement('link'); 
  l.rel = 'stylesheet'; 
  l.href = '/css/a1tg2.css'; // 开头加斜杠，变成根相对路径
  var h = document.getElementsByTagName('head')[0]; 
  h.appendChild(l);
};

优点：实现简单，无额外依赖，适合域名固定的生产环境。

2. 动态获取网站根路径（适配多环境）

如果你的项目需要在本地开发、测试服、生产服等不同环境切换，手动写绝对路径容易出错，可以通过脚本自动获取根路径：

var cb = function() { 
  // 获取当前网站的根域名+根路径
  var rootPath = window.location.origin + '/';
  var l = document.createElement('link'); 
  l.rel = 'stylesheet'; 
  l.href = rootPath + 'css/a1tg2.css'; 
  var h = document.getElementsByTagName('head')[0]; 
  h.appendChild(l);
};

优点：自动适配不同环境的域名，不用手动修改路径，适合多环境开发的项目。

3. 添加<base>标签统一路径基准

在页面的<head>里添加<base>标签，指定所有相对路径的基准为根目录：

<head>
  <base href="/">
  <!-- 其他头部内容 -->
</head>

之后不管在哪个层级的页面，所有相对路径都会以根目录为起点解析。
注意：这个标签会影响页面内所有相对路径（包括图片、链接、脚本等），如果子目录里有专属的相对资源，需要单独调整为绝对路径。

验证方法 #

修改后可以打开子目录页面，通过浏览器开发者工具的「网络」面板，查看CSS文件的请求URL是否正确指向http://example.com/css/a1tg2.css，确认文件加载成功即可。

内容的提问来源于stack exchange，提问作者Tog Porter