Wie kann ich Javascript verwenden, um relative href-Attribute in absolute Pfade zu konvertieren?

Question

Ich habe eine Vorlage, die Bildschirme von einem externen Anbieter abruft und absolute Pfade in der Navigation enthalten muss, damit der extern gehostete Inhalt korrekt mit unserer Website verknüpft wird.

Im Moment ist die Seite/Vorlage durch ein globales Menü-App von unserem Backend Entwicklungspersonal geschrieben angetrieben wird ... wer also unsere Website aktualisiert geht in und ändert die Menüs und ihre Pfade ...

Recht Jetzt verlinken alle Links zu relativen Pfaden zurück zum root.

Zum Beispiel

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

Ich brauche eine einfache Art und Weise (vorzugsweise mit jquery) „http://www.domain.com“ auf jede dieser Verbindungen vorangestellt wird.

Answer 1

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

Answer 2

Ich empfehle nicht Javascript zu verwenden, um dieses Problem zu lösen. Dies sollte in der Seitenvorlage gelöst werden. Wenn Sie jedoch immer noch eine jQuery-Lösung haben wollen, dann sind Sie hier. Unter der Annahme, diese Verbindungen eine bestimmte Klasse haben, die sie von internen Links unterscheiden:

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

Answer 3

Bitte beachten Sie, dass jQuery-Objekt $ ("a") attr ("href") zu $ ​​nicht gleich ist ("a. ") .get (0) .href?

In Ihnen Fall, kann dies nicht helfen, weil Sie statische Markup, Javascript dynamischen Inhalt generieren möchten. Aber es scheint, dass Sie statische Markup in diesem Fall möchten, muss es von Server emittiert werden.

Answer 4

Sie nicht jquery für eine solche einfache Funktion benötigen ....

var elements = document.getElementsByTagName("a"); 
var eachLink; 
for (eachLink in elements) { 
var relativeLink = eachLink.href; 
var absoluetLink = ["http://",domainName,"relativeLink"]; 
eachLink.href = absoluteLink.join(""); 
} 

so etwas wie dies funktionieren sollte, und es läuft viel schneller und Sie werden nicht die gesamte jQuery-Bibliothek laden müssen nur um 6 Zeilen Code auszuführen: P

Answer 5

Ich bemerkte, dass alle Lösungen hier nur mit href-Attributen arbeiten, die mit einem "/" -Zeichen beginnen. Wenn Sie etwas robusteres möchten, können Sie die js-uri Bibliothek versuchen. Es sieht cool aus, aber ich habe es selbst nicht ausprobiert, also weiß ich nicht, wie fehlerhaft es ist.

Answer 6

Es ist sehr einfach:

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

Wenn Sie die href Eigenschaft eines HTMLAnchorElement lesen Sie den absoluten Pfad erhalten, so dass Sie es mit attr() -Methode von JQuery überschreiben können.