Icon und automatisches Öffnen in einem neuen Browserfenster für externe Links

Sicherlich haben Sie schon das kleine Iconneben einem Link auf meiner und anderen Seiten gesehen und sich gefragt wie dieses dahin kommt und ob man es jedes mal von Hand einfügen muss. Und wieso taucht es nur bei externen Links auf?

Voraussetzung:

WB 2.8 mit integriertem jQuery

sicherer Umgang mit dem Texteditor

Grundkenntnisse CSS

Auf geht´s

Bekanntlich führen ja viele Wege nach Rom und so auch bestimmt zu dem kleinen Icon neben dem Link. Ein einfacher Weg geht wieder einmal über jQuery. Das jQuery-Framework bringt von Haus aus eine Filterfunktion mit welcher wir uns bedienen ohne noch ein zusätzliches Plugin zu bemühen.

In den Head unseres Templates schreiben wir:
 

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a").filter(function() {
    return this.hostname && this.hostname !== location.hostname;
}).addClass('external');
});
//]]>
</script>

Diese Funktion vergleicht nun ob der gesetzte Link innerhalb der Webseite bleibt oder aber eine externe Adresse aufruft. Stellt die Funktion fest dass der Link zu einem externen Ziel führt wird dem Link automatisch die Class "external" mitgegeben. Die Class "external" schreiben wir wie folgt in die CSS Datei unseres Templates.

 

a.external {
    background: url(/der/Pfad/zu/Ihrem/external.png) center right no-repeat;
    padding-right: 13px;
}

Das ist schon die ganze Zauberei mit dem External-Icon.

Wir können das ganze aber noch ein wenig ausbauen in dem wir der Funktion noch die Aufgabe mitgeben externe Links doch bitte in einem neuen Fenster zu öffnen. Somit entfällt das Hinzufügen des target _blank Befehls. Jeder externe Link geht dann wie von Zauberhand alleine in einem neuen Browser-Fenster auf.

Der einzufügende Code muss dann so aussehen:
 

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a").filter(function() {
    return this.hostname && this.hostname !== location.hostname;
}).addClass('external').attr("target", "_blank");
});
//]]>
</script>

So das war schon wieder alles.

zurück