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

Question

我有一个模板，从外部供应商进行屏幕抓取，并需要在导航中包含绝对路径，以便外部托管内容可以正确链接回我们的网站。

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

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

例如

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

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

- jhensley

Answer 1

请注意，jQuery对象$("a").attr("href")与$("a").get(0).href不相等。

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

在您的情况下，这可能对您没有帮助，因为您想要静态标记，而Javascript会生成动态内容。但是看起来您希望在这种情况下使用静态标记，那么它必须由服务器发出。

- Fred Yang

---

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

Answer 2

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

- user434917

---

该值仅解析一次，而不是针对每个节点，因此您能够使用它有点奇怪。下面有正确的答案。 - greenoldman

Answer 3

对于这样一个简单的功能，您不需要使用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

- Jlam

Answer 4

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

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

- Nadia Alramli

Answer 5

这非常简单：

它很简单：

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

当您读取HTMLAnchorElement的href属性时，会得到绝对路径，因此可以使用jQuery的attr()方法进行覆盖。

- ESL

Answer 6

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

- Elias Zamaria