Wie erhält man die URL, der ein Browser folgt, wenn wir auf einen Link klicken?

Question

Wenn wir ein <a> Tag klicken, wird der Browser auf die entsprechende Seite umgeleitet, aber es gibt einige Details. Betrachten Sie die folgenden Beispiele:

Wenn wir solche Seite mit einem Browser besuchen, wird es in gewissem Sinne diese übersetzen. Wenn die Adresse der Seite, auf der dieses befindet sich http://www.example.com/pages/somepage.html ist der Erste, der eine Umleitung zu http://www.example.com/onepage.html übersetzt wird, wird die zweite bleiben, wie es ist, wird die dritte auf einer Umleitung in http://www.example.com/onepage und der letzte wird auch wie sein übersetzt werden der dritte.

Meine Frage ist: Wie kann, jQuery verwenden wir diese „übersetzten Versionen“ des URLs bekommen? Dies ist nicht die href, da dies die Information "wie es ist" geben wird.

Wie können wir mit jQuery bekommen die URL ein Browser tatsächlich folgen wird, wenn man auf den Link klickt?

Answer 1

Was Sie suchen ist, wie relative Links zu Unbedingten konvertieren. Ich denke, diese Frage hat sich in vielfältigen Formen in this answer

Anstatt Urls als Eingabe beantwortet, können Sie einen jQuery-Selektor benutzen Sie sagen, die erste <a>-Tag $('a')[0] (oder verwenden Sie Ihre Lieblings jquery-Methode) und verwenden, die als die Variable link, die in der verknüpften Lösung verwendet wird.

Answer 2

Sie können dies mit .prop('href') in jQuery tun. Dies ist einer der Fälle, in denen zwischen .prop() und .attr() ein Unterschied besteht. .attr() gibt das Raw-Attribut vom DOM-Element zurück, aber .prop gibt die href-Eigenschaft zurück, die sich aus der Analyse der URL ergibt.

In reinem Javascript wären dies element.href und 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>