Auf wohl so gut wie jeder Webseite sind externe Links zu finden. Und häufig wird gewünscht, dass sich externe Links in einem neuen Fenster öffenen –zum Beispiel um die Besucher der Webseite über einen solchen externen Link nicht zu verlieren. Über die Target-Anweisung „_blank“ lässt sich das auch ganz komfortabel bewerkstelligen. Doch wie kann man sicherstellen, dass sich immer alle externen Links in einem neuen Fenster öffnen?

Mal werden externe Links im CMS komfortabel über eigene Eingabefelde verwaltet, aber häufig sind extrne Links im Content der Seite zu finden – im Fließtext. Die Links werden dann über den Text-Editor angelegt – und da kommt es immer wieder vor, dass es die Redaktion versäumt, den Link als externen Link zu markieren bzw. das Häkchen für die Target-Anweisung „_blank“ zu setzen.

Mithilfe den folgenden kleinen jQuery Code Schnippsels läßt sich dieses Problem komfortabel beseitigen:

<script>
jQuery("html a[href^=http]").each(function(){
    if(this.href.indexOf(location.hostname) == -1) {
        jQuery(this).attr({
            target: "_blank",
            title: "Opens in a new window"
        });
    }
});
</script>

Zuerst such das Skript nach allen Linkelementen, die „http“ enthalten. Lokale Links, die direkt mit dem Top-Verzeichnis und nicht mit dem Domainnamen beginnen, werden also von vorneherein ignoriert. In der zweiten Zeile wird geprüft, ob der angegebene Hostname bzw. die im Link aufgeführe Domain von der DOmain abweicht, auf der sich das Skript befindet. Der nachfolgende Code wird also nur auf Links angewendet, die auf andere Webseiten verweisen, als die eigene.

In den folgenden zwei Zeilen wird den Links die Target-Anweisung „_blank“ sowie ein Title-Tag mit dem Hinweis „Opens in a new window“ hinzugefügt. Damit haben wir das Grundproblem bereis behoben: alle externen Links werden nun in einem neuen Fenster geöffnet.

Im folgenden kommen noch zwei weitere Code-Schnippsel hinzu, die ggf. ganz praktisch sein könnnen, wenn man das Design externer Links per CSS anders gestalten möchte, als interne Links.Diesmal bezieht sich das Skript allerdings exemplarisch nicht auf den gesamten HTML Code der Seite, sondern ausschließlich auf die Inhalte, die sich innerhalb des DIV-Containers mit der Klasse „entry-content“ befinden.

Der erste Teil bleibt  also wie er ist – nur die Auswahl wurde hier exemplarisch auf den DIV-Container mit der Klasse „entry-content“ eingeschränkt.

Es folgt ein Einzeiler, der allen externen Links bzw. allen Links, die sich in einem neuen Fenster öffnen, die CSS-Klasse „external“ hinzufügt. Somit könnte der Link bereits jetzt ein eigenes Design erhalten.

Um die Sache noch ein wenig komfortabler zu machen wird nun in dem dritten Code-Schnippsel noch ein SPAN-Container in den Link eingebaut. Somit ließe sich beispielweise durch den ::before-Selector oder den ::after-Selector dem Link ein Pictogramm hinzufügen, das visuell darauf hinweist, dass man bei Klick auf den Link die Seite in einem neuen Fenstern verlässt.

<script>
jQuery(".entry-content a[href^=http]").each(function(){
    if(this.href.indexOf(location.hostname) == -1) {
        jQuery(this).attr({
            target: "_blank",
            title: "Opens in a new window"
        });
    }
});

jQuery('.entry-content a[target="_blank"]').addClass('external');


jQuery('.entry-content a.external').each(function(){
    jQuery(this).each(function(){
      jQuery(this).wrapInner('<span></span>');
    });      
});
</script>

Und das wars schon. So lassen sich externe Links mithilfe eines kleinen jQuery-Snippets automatisch in neuem Fenster öffnen.