Externe Links mit jQuery im neuem Fenster öffnen

Häufig passiert es, dass man das target="_blank" in externen Links vergisst. Damit man sich darum nicht mehr kümmern muss, kann man mit Hilfe von jQuery seine Links erweitern und manipulieren.

Da ich mich hier hauptsächlich mit WordPress beschäftige, findest du hier nur eine Lösung mit jQuery. Weitere Lösungsansätze findest du u.a. bei CSS-Tricks.

Externe Links im neuem Fenster öffnen

// Hier deine Domain eintragen
let host = "https://pixelbart.de";

$('a:not([href^="' + host + '"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([href^="tel:"])').attr("target", "_blank");

Möchtest du deinen externen Links zusätzlich noch eine CSS-Klasse geben, damit du sie bspw. mit CSS besonders kennzeichnen kannst, dann musst folgendes tippen:

// Hier deine Domain eintragen
let host = "https://pixelbart.de";

$('a:not([href^="' + host + '"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([href^="tel:"])').addClass("external").attr("target", "_blank");

Jetzt wird automatisch die CSS-Klasse .external mit angeheftet und du kannst deine CSS-Zauberei wirken.

Im WordPress Repository findest du auch Plugins, die das Ganze für dich übernehmen. Falls du dir aber ein Plugin sparen möchtest, weißt du jetzt wie das Ganze geht.

Der Schnipsel achtet außerdem darauf, ob der Link ein tel: oder mailto: inne hat, damit diese nicht auch in einem neuem Fenster geöffnet werden.

Hinweis: Das Bild habe ich ausgewählt, weil es mir gefallen hat. Ich habe nach Outside auf Unsplash gesucht und das tolle Bild von Tomasz Rynkiewicz gefunden.

Hat dir der Beitrag gefallen?


Zuletzt aktualisiert: 12. März 2021


Avatar of Kevin Pliester

Langhaarig und bärtig. Schreibt hier über WordPress, Internet, Gaming und die Selbstständigkeit. Vertreibt viel zu günstige WordPress Wartungen und ist angestellter Webentwickler.