使用 JavaScript 将相对路径转换为绝对路径

Question

HTML:

 <a href="/">1</a> // link to http://site.com
<a href="/section/page/">2/a> // link to http://site.com/section/page/
<a href="http://site.com/">3</a>
<a href="../gallery/1/">4</a> // link to http://site.com/gallery/1/

记者：

 $("a").live('click', function(){
    var url = $(this).attr("href");
    //do something
});

如何通过 jQuery 将相对路径 ( var url ) 转换为绝对路径？

如果脚本已经是绝对路径，则脚本不应执行任何操作。

谢谢。

原文由 James 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我很确定，如果您使用 href 属性 而不是获取 _属性_，您将拥有一个包含域的完整 url：

 $("a").live('click', function(){
    var url = this.href;    // use the property instead of attribute
    //do something
});

正如@Phrogz 链接的问题中所指出的，听起来 IE6 似乎存在问题。

如果您需要支持它，您可能需要从不同的部分构建 href this.host 和 this.pathname 。 IE6 支持这些属性。您也可以使用其他一些，但您需要验证支持。

jquery live() 函数在 1.7 版中已弃用并从 1.9 版中删除，因此请使用备用 on() ：

 $("a").on('click', function(){
    var url = this.href;    // use the property instead of attribute
    //do something
});

原文由 user113716 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不是 OP 要求的，但是如果有人试图为 <img> 标签（就像我发现这个问题时一样）这样做，秘密就是 不 使用 jQuery 的 attr 方法。

这为您提供了 src 属性的直接内容（如果它是相对的，则将是相对的）：

$('#your_img').attr('src')

而在 DOM 对象本身上调用 .src 总是会给你绝对路径（我需要的）：

$('#your_img').get(0).src

原文由 William Denniss 发布，翻译遵循 CC BY-SA 3.0 许可协议