Question

当我们点击一个<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 {1}}和最后一个也将是第三个。

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

如果点击链接，我们如何使用jQuery获取浏览器实际遵循的URL？

Answer 1

您正在寻找的是如何将相对链接转换为绝对链接。我认为这个问题已经在this answer

中以多种形式得到了回答

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

Answer 2

您可以使用.prop('href')在jQuery中执行此操作。这是.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>

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

2 个答案: