如何使用javascript将相对的href属性转换为绝对路径?

问题描述:

我有一个从外部供应商获取屏幕抓图的模板,并且需要在导航中包含绝对路径,以便外部托管的内容将正确链接回我们的网站。如何使用javascript将相对的href属性转换为绝对路径?

眼下页/模板是由我们的后端开发人员编写的全局菜单的应用程序...所以任何人谁更新我们的网站进去,并改变菜单和其路径驱动...

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

例如

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

我需要一种简单的方式(优选地与jquery)前面加上“http://www.domain.com”到每个这些链接。

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

该值解析一次,而不是每个节点,所以它很奇怪它适用于你。下面有正确的答案。 – greenoldman 2014-01-12 22:00:59

我不推荐使用javascript解决此问题。这应该在页面模板中解决。但是,如果你仍然想要一个jQuery解决方案,那么你去。假设这些链接有区别于内部链接特定类:

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

请注意,jQuery对象$( “A”)ATTR( “HREF”)不等于$(“一个。 “).get(0).href?

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

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

+0

你应该整理你的代码片段。 – SpoonMeiser 2009-12-11 16:16:51

你不需要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

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

这很简单:

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

当你读到一个HTMLAnchorElement的href属性,你得到的绝对路径,这样你就可以使用jQuery的ATTR()方法将其覆盖。