当我们单击链接时，如何获取浏览器将遵循的 URL？答案

【问题标题】：How to get the URL a browser will follow when we click on a link?当我们单击链接时，如何获取浏览器将遵循的 URL？
【发布时间】：2016-11-03 07:56:48
【问题描述】：

当我们点击一个<a> 标签时，浏览器会被重定向到相应的页面，但有一些细节。考虑以下示例：

<a href="../onepage.html">One Page</a>
<a href="http://example.com/onepage.html">One Page</a>
<a href="onepage">One Page</a>
<a href="onepage.html">One Page</a>

当我们使用浏览器访问此类页面时，它会在某种意义上翻译这些页面。如果它所在页面的地址是http://www.example.com/pages/somepage.html，第一个将被转换为重定向到http://www.example.com/onepage.html，第二个将保持原样，第三个将被转换为重定向到http://www.example.com/onepage，然后最后一个也和第三个一样。

我的问题是：如何使用 jQuery 获得这些 URL 的“翻译版本”？这不是href，因为它会“按原样”提供信息。

我们如何使用 jQuery 获得当点击链接时浏览器实际遵循的 URL？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您正在寻找的是如何将相对链接转换为绝对链接。我认为这个问题已经在this answer中以多种形式回答了

您可以使用 jquery 选择器来获取第一个 <a> 标记，而不是使用 URL 作为输入，使用 $('a')[0]（或使用您最喜欢的 jquery 方法）并将其用作链接中使用的 link 变量解决方案。

【讨论】：

【解决方案2】：

您可以在 jQuery 中使用 .prop('href') 来完成此操作。这是.prop() 和.attr() 之间存在差异的情况之一。 .attr() 从 DOM 元素返回原始属性，但 .prop 返回解析 URL 产生的 href 属性。

在纯 Javascript 中，这些将是 element.href 和 element.getAttribute('href')。

$("a").each(function() {
  console.log('.attr: ' + $(this).attr('href') + ' .prop: ' + $(this).prop('href'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="../onepage.html">One Page</a>
<a href="http://example.com/onepage.html">One Page</a>
<a href="onepage">One Page</a>
<a href="onepage.html">One Page</a>

【讨论】：