Links per JavaScript mit einem Attribut versehen

Zuletzt aktualisiert am 29. November 2021.

Oder: Links ohne PHP in einem neuen Fenster öffnen

Wenn man einen Link in einem neuen Fenster öffnen lassen will, so versieht man das a-Tag mit einem ‘target=”_blank”‘-Attribut. Das macht man direkt im HTML-Code oder, wenn die Seite dynamisch generiert wird, im PHP-Code. Aber was ist, wenn das nicht geht?

Es gibt Fälle, da hat man z.B. keinen Zugriff auf den PHP-Code. Oder – wie z.B. bei WordPress oder WordPress-Plugins oft der Fall: Der Link wird durch eine Funktion generiert. Wenn man nun diese Funktion anpasst, muss man das entweder per Hook machen, oder aber über ein Child-Theme bzw. direkt im Code.

Ändert man den Code im Child-Theme, wird das jeweilige File nicht mehr geupdatet. Ändert man den Code direkt, wird die Änderung mit jedem Update des Plugins überschrieben.

Es gibt eine Lösung: Das Attribut mittels JavaScript ergänzen.

Gott sei dank gibt es noch einen dritten Weg. Und der lässt sich mit JavaScript realisieren.

Der Vorteil ist, dass man JavaScript relativ leicht einbinden kann, z.B. im Footer oder Header der Webseite (Die meisten WordPress-Themes bieten extra die Möglichkeit, JavaScript einzubinden).

Und JavaScript wird clientseitig ausgeführt. Man kann also warten, bis die Webseite bzw. das DOM geladen ist und den DOM nachträglich manipulieren.

So kann man zum Beispiel mittels ID/Klasse leicht auf jeweilige Elemente im DOM zugreifen und zum Beispiel unser gewünschtes Target-Attribut ergänzen:

jQuery( document ).ready( function(){
  $('#id_des_elements a').attr('target', '_blank');
});

Die obige Lösung setzt übrigens jQuery voraus.