在缺少斜杠 / 的页面中构建相对 URL

Question

我们迫切需要帮助编写一个小代码，该代码允许您获取当前页面 URL 和 href="parm" 中的参数，并通过用斜杠连接两者来创建链接。

我们需要这样做的原因是因为我们需要到当前页面的相对链接。我们正在使用的 CMS 系统会从 URL 的末尾删除斜杠。

这是一个问题，因为如果你在一个页面 domain.com/fruit/apple

并创建一个链接，例如 href="calories" 或 href="./calories" 它将指向 domain.com/fruit/calories

相反，我们希望它指向 domain.com/fruit/apple/calories

相对于当前页面。

我们不想改变 CMS 的工作方式，因此需要 JS 解决方案。

您可以在下面看到我们正在尝试完成的一个示例，但这仅适用于一个链接。

<a href="home" id="relurl" target="_blank" title="This is a relative link!">link</a>

启动 JS

var x = window.location.href; // Current page URL
var link = document.getElementById("relurl"); // store the element
var curHref = link.getAttribute('href'); // Get HREF paramter
link.setAttribute('href', x + "/"+ curHref);

结束 JS

这个想法是每次使用 id="relurl" 的链接时都建立相对链接。

根据前面的示例，此链接：a href="home" id="relurl" target="_blank" title="这是一个相对链接！">链接

在此页面：domain.com/fruit/apple

它应该指向 domain.com/fruit/apple/home

表示链接结构是currentpageURL + / + href

一个页面可能有多个相对链接。

感谢您的帮助。

Answer 1

虽然您可以只在链接中使用相对 URL（使用 href="./page"），但听起来问题在于您使用了重复的 ID（这会导致无效标记）。您可以使用 W3C Markup Validation Service 测试您的标记是否有效。

当您有重复的 ID 时，JavaScript 仅适用于第一个元素。这可以在下面看到：

var x = window.location.href; // Current page URL
var link = document.getElementById("relurl"); // store the element
var curHref = link.getAttribute('href'); // Get HREF paramter
link.setAttribute('href', x + "/" + curHref);

<a href="home" id="relurl" target="_blank" title="This is a relative link!">Working Link</a>
<br />
<a href="home" id="relurl" target="_blank" title="This is a relative link!">NOT Working</a>

要解决此问题，您应该为链接使用类而不是 ID。然后您可以使用 document.getElementsByClassName 来选择元素。请记住，这会返回 NodeList 元素集合，因此您需要在循环内设置新 URL，如下所示：

var x = window.location.href; // Current page URL
var links = document.getElementsByClassName("relurl"); // store the elements
for (var i = 0; i < links.length; i++) {
  var curHref = links[i].getAttribute('href'); // Get HREF paramter
  links[i].setAttribute('href', x + "/" + curHref);
}

<a href="home" class="relurl" target="_blank" title="This is a relative link!">Working Link</a>
<br />
<a href="home" class="relurl" target="_blank" title="This is a relative link!">Another Working Link</a>

希望这会有所帮助！ :)

Answer 2

这将更新当前页面中的所有链接：

const updateNode = node =>
  node.href = `${window.location}/${node.href}`

document.querySelectorAll('a').forEach(updateNode)