Der direkte Zugriff
Das ![[intern]](../../lib/img/intern.gif){kind=small}
bisherige Beispiel für die barrierefreie Gestaltung von Pop-Up-Links erzeugt relativ viel Quellcode. Unter Berücksichtigung des optionalen Charakters des Linkverhaltens, d.h. der Link geht nur dann in einem neuen Fenster auf, wenn JavaScript aktiv ist, sollten auch die Prinzipien des ![[extern, deutsch]](../../lib/img/de.gif)
unobtrusive JavaScript berücksichtigt werden. Dies bedeutet:
Für unser konkretes Beispiel heißt das, dass eine separate JavaScript-Datei eine Funktion anbietet, die das Linkverhalten (Öffnen in einem neuen Fenster) dynamisch zuweist. Welche Links dieses Verhalten zugewiesen bekommen, muss anhand eines bestehenden Attributs im HTML erfolgen.
Im Prinzip ist es möglich, anhand eines beliebigen Attributs das neue Verhalten dynamisch zuzuordnen. Auch muss die Funktion nicht explizit aufgerufen werden, sondern ein JavaScript kann ebenso eine Seite nach Links mit einem bestimmten Attribut durchsuchen und eine Funktion einem Link zuweisen. Es muss lediglich festgelegt werden, welches Attribut eingesetzt werden und welchen Wert das Attribut besitzen soll.
Folgende Attribute kommen u.a. in Frage:
title |
Wenn title einheitlich bei der Einbindung von Pop-Up-Fenstern genutzt wird, bietet dieses Attribut eine gute Ausgangsbasis. |
|---|---|
class |
Wenn Pop-Up-Fenster mit Klassen gekennzeichnet werden, so können diese Klassen auch mit JavaScript ermittelt werden. |
rel |
Ein häufig für Links in verschiedenen Zusammenhängen verwendetes Attribut ist rel (relation), das z.B. den Wert "popup" erhalten könnte. |
Im Folgenden geht man davon aus, dass neue Fenster in irgendeiner Weise eine Besonderheit unter den Links darstellen und dass diese BITV-konform mit dem title-Attribut angekündigt werden. Im bisherigen Beispiel steht für Links zu anderen Webauftritten der Text "Externer Link" im title-Attribut. Es steht aber jedem frei, ein anderes Attribut mit einen vereinbarten Inhalt als "Erkennungszeichen" zu verwenden.
Der Beispiellink sieht nun wieder vereinfacht wie folgt aus:
<a href="http://www.seitenadresse.de" title="Externer Link">Text des Links</a>
Es wird für unser Beispiel angenommen, dass Links zu externen Seiten in neuen Fenstern aufgehen sollen.
Die Links sollen nun um Event-Handler erweitert werden, die beim Klick mit dem Mauszeiger oder durch Eingabe per Tastatur auf dem Link das Öffnen des Links in einem neuen Fenster bewirken. Weiter soll das title-Attribut ergänzt werden um die Angabe, dass der Link im neuen Fenster geöffnet wird.
Für die dynamische Anpassung des Links sind folgende Bausteine erforderlich:
title-Attribut mit dem Inhalt "Externer Link" sein.title-Attributs um die Information, dass der Link in einem neuen Fenster aufgehen soll, und um die Event-Handler, die das neue Fenster öffnen werden.Der erste Teil des Skripts zum Durchsuchen des Dokuments ist unserem bisherigen Beispiel sehr ähnlich. Die wesentlichen Unterschiede sind:
title-Attribut gefunden wird.function sucheNeueFenster() {
var externerLinkText = "Externer Link";
var textNeuesFenster = "öffnet in einem neuen Fenster";
if (!document . getElementsByTagName) { return } ;
var links = document . getElementsByTagName("a");
for (i = 0; i < links . length; i++) {
textalt = links[i] . getattribute("title");
if (textalt && (textalt . indexof(externerlinktext) != -1)) {
textzusatz = textalt . substring((textalt . indexof(externerlinktext)) + externerlinktext . length, textalt . length);
links[i] . setattribute("title", externerlinktext + " " + textneuesfenster + textzusatz);
links[i] . onclick = links[i] . onkeypress = erzeugepopup;
links[i] . style . bordertop = "1px solid #000000";
}
}
}
Wenn das Skript einen Link mit dem title-Attribut "Externer Link" findet, dann werden zwei Event-Handler (onclick und onkeypress) zum Link hinzugefügt und das title-Attribut wird um die Ankündigung des neuen Fensters ergänzt. Diese dynamische Zuweisung von Attributen kann erweitert werden. In dem Beispiel wird noch eine CSS-Eigenschaft (border-top) beispielhaft berücksichtigt. Die einzelnen Zeilen haben folgende Bedeutung:
| Zeile | Inhalt | Bedeutung |
|---|---|---|
| 1 | function sucheNeueFenster() { |
Einleitung der Funktion. |
| 2 | var externerLinkText = "Externer Link"; |
Variable, die den Text zur Kennzeichnung eines externen Links enthält. |
| 3 | var textNeuesFenster = "öffnet in einem neuen Fenster"; |
Variable, die den Text zur Kennzeichnung neuer Fenster enthält. |
| 4 | if (!document . getElementsByTagName) { return } ; |
Nur wenn der Browser die JavaScript-Methode getElementsByTagName kennt, wird die Funktion ausgeführt, da es ansonsten zu JavaScript-Fehlern kommen kann. Wenn die Methode vom Browser nicht unterstützt wird, wird ein Rückgabewert an den Link erzeugt, der das Öffnen im gleichen Fenster bewirkt. |
| 5 | var links = document . getElementsByTagName("a"); |
Über das DOM wird das komplette aktuelle Dokument nach Links (A-Elementen durchsucht, welche in einem Array links zwischengespeichert werden. |
| 6 | for (i = 0; i < links . length; i++) { |
Eine Schleife wird generiert, um die einzelnen Links im gerade erzeugten Array nacheinander zu bearbeiten. |
| 7 | textAlt = links[i] . getAttribute("title"); |
Mit der getAttribute-Methode wird das aktuelle title-Attribut eines Links aus dem Arrayfestgestellt und in einer neuen Variable gespeichert. |
| 8 | if (textAlt && (textAlt . indexOf(externerLinkText) != -1)) { |
Eine kleine Sicherheitsabfrage, ob ein title existiert und ob die Angabe zum Öffnen eines neuen Fensters bereits im title-Attribut enthalten ist, sollte gemacht werden, um zu verhindern, dass diese Information ein weiteres Mal dynamisch hineingeschrieben wird. |
| 9 | Zusatz = textAlt . substring((textAlt . indexOf(externerLinkText)) + externerLinkText . length, textAlt . length); |
Es wird im title-Attribut nach zusätzlichen Texten gesucht. In diesem Beispiel wird vorausgesetzt, dass das title-Attribut mit "Externer Link" beginnt. Alles, was sich dahinter befindet, wird in einer neuen Variable gespeichert. |
| 10 | links[i] . setAttribute("title", externerLinkText + " " + textNeuesFenster + textZusatz); |
Im hinteren Teil dieser Zeile wird zunächst ein neuer Text für das title-Attribut zusammengesetzt, bestehend aus dem Hinweis auf ein neues Fenster und dem eigentlichen Text des title-Attributs. Im ersten Teil dieser Zeile wird dieser Text mittels setAttribute dem aktuellen Link aus dem Array als title-Attribut dynamisch zugewiesen. |
| 11 | links[i] . onclick = links[i] . onkeypress = erzeugePopup; |
Die (noch zu erläuternde) Funktion die den Link im neuen Fenster aufgehen lässt, wird jetzt mit den beiden Event-Handlern onclick und onkeypress dem aktuellen Link im Array dynamisch beigefügt. |
| 12 | links[i] . style . borderTop = "1px solid #000000"; |
Hier wird beispielhaft eine CSS-Eigenschaft ebenfalls dem aktuellen Link zugeordnet. Das Beispiel erzeugt eine dünne Linie oberhalb des Links, die Nutzern signalisieren soll, dass der Link im neuen Fenster aufgeht (funktioniert nicht in allen Browsern). |
| 13, 14, 15 | } } } |
Die Abfragen und die Funktion werden geschlossen |
Die zweite Funktion wird im Folgenden simple gehalten. Neben dem Aufruf der Seite können aber weitere Eigenschaften des zu öffnenden Pop-Ups berücksichtigt werden, etwa Fensterbreite und -höhe oder Position.
function erzeugePopup() {
neuesFenster = window . open(this . href);
neuesFenster . focus();
return false;
}
Diese zweite Funktion wird den Links durch die erste Funktion über Event-Handler zugewiesen. Bei aktiviertem JavaScript wird bei Aufruf des Links die Seite in einem neuen Fenster geöffnet und der Fokus auf das neue Fenster gelegt.
Es fehlt lediglich die Ingangsetzung der ersten Funktion. Dies erfolgt mit einer Zeile:
window.onload = sucheNeueFenster;
Der onload-Event-Handler kann dann Schwierigkeiten verursachen, wenn mehrere unabhängige Funktionen nacheinander diesem Event-Handler zugewiesen werden. Sollten Probleme auftauchen, können Sie anstatt der obigen Zeile auch die folgenden Anweisungen nutzen:
var zaehler = 0;
meineFunktionen = window.onload;
window.onload = function() {
if (zaehler == 0) {
if (typeof meineFunktionen == "function") meineFunktionen();
sucheNeueFenster();
zaehler++;
}
}
Das komplette Beispiel ist in einer Demonstrationsdatei aufbereitet. Dort werden gleich zwei verschiedene Pop-Up-Fenster bereitgestellt: das eine ist wie oben beschrieben und das zweite enthält Erweiterungen, die das Pop-Up-Fenster in Größe und Position verändern.
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
target
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
