如何使用 javascript 将相对 href 属性转换为绝对路径？答案

【问题标题】：How can I use javascript to convert relative href attributes into absolute paths?如何使用 javascript 将相对 href 属性转换为绝对路径？
【发布时间】：2009-05-06 19:51:33
【问题描述】：

我有一个从外部供应商处截屏的模板，需要在导航中包含绝对路径，这样外部托管的内容才能正确链接回我们的网站。

目前，页面/模板由我们的后端开发人员编写的全局菜单应用程序驱动...所以任何更新我们网站的人都会进入并更改菜单及其路径...

现在所有的链接都链接到返回根的相对路径。

例如

<a href="/">Home</a>
<a href="/news/">News</a>
<a href="/media/">Media</a>
<a href="/other/">Other</a>

我需要一种简单的方法（最好使用 jquery）将“http://www.domain.com”添加到每个链接。

【问题讨论】：

标签： javascript jquery html url

【解决方案1】：

请注意 jQuery 对象 $("a").attr("href") 不等于 $("a").get(0).href ?

$("a").each(function() {
   alert(this.href);
   $(this).attr("href") = this.href;
});

在你的情况下，这可能对你没有帮助，因为你想要静态标记，javascript 生成动态内容。但在这种情况下，您似乎需要静态标记，它必须由服务器发出。

【讨论】：

你救了我的命......这是一个很好的信息......这个答案应该被标记为正确答案

【解决方案2】：

$('a').attr('href', 'http://www.domain.com'+$(this).attr('href'));

【讨论】：

该值被解析一次，而不是针对每个节点，所以很奇怪它对你有用。下面有正确答案。

【解决方案3】：

我不建议使用 javascript 来解决这个问题。这应该在页面模板中解决。但是，如果您仍然想要一个 jquery 解决方案，那么就可以了。假设这些链接具有将它们与内部链接区分开来的特定类：

$('a.external').each(function() {
    $(this).attr('href', domain_name + $(this).attr('href'));
})

【讨论】：

【解决方案4】：

这么简单的功能不需要 jquery ......

var elements = document.getElementsByTagName("a");
var eachLink;
for (eachLink in elements) {
 var relativeLink = eachLink.href;
 var absoluetLink = ["http://",domainName,"relativeLink"];
 eachLink.href = absoluteLink.join("");
}

这样的东西应该可以工作，而且它运行得更快，你不需要加载整个 jquery 库来运行 6 行代码：P

【讨论】：

【解决方案5】：

很简单：

$('a').each(function(){$(this).attr('href',this.href);});

当你读取HTMLAnchorElement的href属性时，你会得到绝对路径，所以你可以用JQuery的attr()方法覆盖它。

【讨论】：

【解决方案6】：

我注意到这里的所有解决方案都只适用于以“/”字符开头的 href 属性。如果你想要更健壮的东西，你可能想试试js-uri 库。它看起来很酷，但我自己没有尝试过，所以我不知道它有多bug。

【讨论】：