JS: Externe Links in neuem Fenster öffnen

Icon JS Popup Der Wunsch Verweise, die auf fremde, externe Webseiten verweisen, in einem neuen Fenster zu öffnen, ist recht weit verbreitet. Um diese Anforderung umzusetzen gibt es verschiedene Lösungsansätze. Die auf dieser Website eingesetzte Methode soll nachfolgend erklärt werden.

Ergänzend zum Öffnen in einem neuen Fenster, oder Popup, sollen diese Verweise zusätzlich gekennzeichnet werden, um dem Besucher dieses Verhalten anzuzeigen, und der Code soll zu allen (X)HTML Varianten kompatibel sein. Daher scheidet das einfaches Notieren des Atrributes target="_blank" im Ankerelement aus, da es zum Beispiel für die XHTML strict Variante nicht valide wäre.
Ein Ausweg ist die Verwendung von JavaScript, um das gewünschte Verhalten zu erreichen und trotzdem valides XHTML strict zu schreiben.
Doch zuerst müssen die Ankerelemente erstellt werden:

Der HTML Quelltext für Ankerelemente

Um alle Links, die auf externe Websites verweisen, gemeinsam ansprechen zu können, werden sie mit einer eigenen Klasse versehen. Dazu wird im Ankerelement das Attribut class="extern" notiert. Dadurch wird es möglich, diese Verweise beispielsweise mit einer kleinen Grafik wie dieser hier Symbol externe Links zu kennzeichnen.
Der Text des Verweises wird dann noch um  <span>(extern)</span> ergänzt.
Das Ganze sieht dann so aus:

  • <a href="http://um-fritz.de" class="extern" title="um-fritz.de">um-fritz.de <span>(extern)</span></a>

TOP

Formatieren der Ankerelemente mit CSS

Durch die Vergabe der Klasse extern können nun im CSS die Verweise mit dem Selector a.extern angesprochen werden. Mit padding-left:20px; wird Platz für die Grafik geschaffen, die anschliessend mit background:url(/bg_grafik/ex_link.gif) center left no-repeat; eingebunden wird.
Der zweite Schritt ist, mittels des Selektors a.extern span alle span-Elemente auszuwählen, die in Ankerelementen vorkommen, die zur Klasse extern gehören. Durch display:none; werden sie ausgeblendet. Der Effekt ist, daß sofern CSS nicht interpretiert wird, die Grafik zwar nicht angezeigt wird, dafür aber der Linktext mit (extern) markiert wird.
So können auch Besucher, die CSS nicht ausführen lassen, informiert werden, dass es sich um externe Links handelt. Der Quelltext im CSS sieht dann so aus:

  • a.extern {
  •   padding-left:20px;
  •   background:url(/bg_grafik/ex_link.gif) center left no-repeat;
  • }
  • a.extern span {
  •   display:none;
  • }

TOP

Attribut target="_blank" mit JavaSkript einfügen

Zunächst muss das Dokument, also die entsprechende Webseite fertig geladen sein, damit alle Ankerelemente bereits vorhanden sind. Natürlich ist es erst danach möglich mit JavaScript auf diese Elemente zuzugreifen. Daher wird die Funktion externeLinks mit window.onload aufgerufen. Dadurch wird die Funktion externeLinks sicher erst ausgeführt, nachdem das Dokument vollständig geladen worden ist.
In der Funktion selbst werden zuerst die beiden Variablen anchors und css_class initialisiert. Dann wird überprüft, ob der Client über die Methode document.getElementsByTagName verfügt. Sollte das nicht der Fall sein, wird das Skript mit return abgebrochen, um Skriptfehler zu vermeiden.
Nun können durch document.getElementsByTagName("a"); alle Ankerelemente in der Variablen anchors gespeichert werden. Der nun mit Ankerelementen gefüllte Array anchors wird in einer Schleife Element für Element durchlaufen. Dabei wird jedes Element überprüft, ob es im Attribut class den Wert extern notiert hat. Das wird mittels if (css_class.match(/extern/)) { ermittelt. Wenn das der Fall ist, wird das Targetattribut gesetzt und das Titelattribut um den Wert (extern) ergänzt. Dadurch wird zusätzlich beim Überfahren des Verweises mit der Maus der Zusatz in der Toolbox angezeigt.
Der vollständige Quelltext für das JavaSkript sieht dann so aus:

  • window.onload = externeLinks;
  • function externeLinks() {
  •   var anchors;
  •   var css_class;
  •   if (!document.getElementsByTagName) {
  •     return;
  •   }
  •   anchors = document.getElementsByTagName("a");
  •   for (i = 0; i < anchors.length; i++) {
  •     css_class = anchors[i].className;
  •     if (css_class.match(/extern/)) {
  •       anchors[i].target = "_blank";
  •       anchors[i].title = anchors[i].title + " (extern)";
  •     }
  •   }
  • }

TOP

Endergebnis

Durch die Kombination von HTML mit CSS und ein wenig JavaScript gelingt es, auch für XHTML strict valide den Effekt von target="_blank" nachzubilden. Natürlich ist dieses Verhalten abhängig davon, ob beim Client JavaScript ausgeführt wird. Das ist aber in den meisten Fällen wohl der Fall. Aber selbst wenn nicht, bleiben die Verweise zugänglich und öffnen sich dann eben einfach im gleichen Fenster. In jedem Fall lassen sich nun externe Links einfach durch Angabe der Klasse extern entsprechend hervorheben.
Das Ergebnis dieses Vorgehens sieht nun jedenfalls so aus: JavaScript Popup (extern)

TOP