如何用JavaScript调用页面？相对路径跳转后失效问题咨询

嘿，这个问题我之前踩过坑！核心原因是相对路径的解析基准会随着当前页面的URL变化而改变，导致你跳转后再用原来的相对路径就跑偏了。

问题分析 #

当你第一次从首页（比如mysite.com/）跳转到pages/pg/5/后，当前页面的URL变成了mysite.com/pages/pg/5/。这时候你再用'pages/pg/'+id+'/'这种相对路径，浏览器会把它解析成当前页面路径的子路径，也就是mysite.com/pages/pg/5/pages/pg/新ID/——这显然不是你要的目标地址，自然就失效了。

不用硬写域名的解决方案 #

这里有几个靠谱的办法，都不需要手动写死域名：

• 方案1：使用根相对路径（最推荐）
  在路径开头加上斜杠/，这样浏览器会直接从网站的根目录开始解析路径，不管当前页面在哪个层级都不会错：

  id = 5;
  var url = '/pages/pg/'+id+'/'; // 开头加/，指向根目录下的pages/pg/
  f.action = url.toLowerCase();
  return true;
  

  这个方法最简单，也是日常开发中最常用的，完全不依赖域名或当前页面位置。

• 方案2：动态获取当前网站的基准地址
  如果你的网站部署在子目录下（比如mysite.com/blog/），或者需要更灵活的路径拼接，可以用window.location.origin自动获取当前域名（包括协议，比如https://mysite.com），再拼接路径：

  id = 5;
  var baseUrl = window.location.origin; // 自动获取当前站点的根地址
  var url = baseUrl + '/pages/pg/'+id+'/';
  f.action = url.toLowerCase();
  return true;
  

  这种方式也不用硬写域名，浏览器会自动适配当前的访问地址。

• 方案3：排查路径解析异常
  要是上面两种方法还不行，可以在设置action后加个日志，看看实际生成的路径是什么：

  f.action = url.toLowerCase();
  console.log('当前表单action:', f.action); // 打印出来看路径是否正确
  

  说不定是其他JS代码偷偷修改了action，或者表单元素的上下文有变化，日志能帮你快速定位问题。

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