molily Navigation

»Popups« mit JavaScript

Die Anleitung diskutiert verschiedene Lösungsmöglichkeiten für Popup-Fenster mit JavaScript.

  1. Einleitung ↓
  2. Problemstellung ↓
  3. Lösungsansatz ↓
  4. Nachteile ↓
  5. Alternativen ↓

Einleitung

Diese Anleitung befasst sich mit der technischen Umsetzung sogenannter Popup-Fenster und erörtert darüber hinaus Alternativen. Es soll gezeigt werden, wie JavaScript-Popups umgesetzt werden, die dem Benutzer die möglichst wenig Probleme bereiten. Dies kann letztlich bedeuten, der Benutzbarkeit halber auf Popups zu verzichten. Zum aktiven Verständnis dieses Artikels wird Grundlagenwissen über HTML und JavaScript empfohlen.

Problemstellung

Man möchte auf einer Website einen Link zu einem Dokument oder einer anderen Quelle setzen. Dieses Dokument soll möglichst in einem neuen Browserfenster geöffnet werden. Dies allein ist mit dem Attribut target="_blank" möglich:

<a href="foo.html" target="_blank">Linktext</a>

Eine weitere Anforderung ist, dass man das Aussehen des Fensters verändern möchte. Das heißt, man möchte die Höhe, Breite und die Anzeige der Menü- und Symbolleisten vorgeben beziehungsweise festlegen können. In diesem Fall kommt das Attribut target="_blank" nicht in Frage, da es eine neue Browserinstanz gemäß den Standardeinstellungen öffnet.

Lösungsansatz

Helferfunktion oeffnefenster

Zum Öffnen eines neuen Fensters lässt sich die JavaScript-Methode window.open nutzen. Der Methodenaufruf wird in einer Helferfunktion mit dem Namen oeffnefenster untergebracht. Diese Funktion wird in einem script-Element im head-Element (Dokumentkopf) des HTML-Dokuments definiert:

<script type="text/javascript">
function oeffnefenster (url) {
   fenster = window.open(url, "fenster1", "width=600,height=400,status=yes,scrollbars=yes,resizable=yes");
   fenster.focus();
}
</script>

Erläuterung

Die Helferfunktion nimmt einen Parameter namens url entgegen. Dies ist die Adresse (URL) der Webseite, die im Popup geöffnet werden soll. Soll www.example.org geöffnet werden, so würde der Aufruf lauten: oeffnefenster('http://www.example.org/').

window.open selbst nimmt drei Parameter entgegen. Zum ersten die Adresse, die in Form des url-Parameters weitergegeben wird. Zum zweiten ein Fenstername, hier "fenster1".

Mithilfe des dritten Parameters kann das Aussehen des Fensters beeinflusst werden, beispielsweise die Größe und die Anzeige von Navigations- und Symbolleisten. Die möglichen Fenstereigenschaften finden sich in der Referenz zur window.open. Die einzelnen Angaben werden durch Kommas getrennt.

Im obigen Beispielaufruf von window.open sind folgende Fenstereigenschaften angegeben: width=600,height=400,status=yes,scrollbars=yes,resizable=yes. Das bedeutet, es soll ein Fenster mit der Größe 600 × 400 Pixel geöffnet werden. Es soll eine Statusleiste, eine Scrollbars (Bildlaufleisten) angezeigt werden. Außerdem ist das Fenster in seiner Größe vom Benutzer veränderbar (resizable).

window.open gibt das Fensterobjekt des Popups zurück (Objekttyp window). Dieses wird in der globalen Variable fenster gespeichert. Darüber kann man auf Objekte, Funktionen und Variablen des geöffneten Dokuments zugreifen. Die Artikel Kommunikation zwischen Fenster und Frames und Zugriff auf verschachtelte Fensterobjekte erläutern dies näher.

In der Regel wird ein Popup-Fenster beim ersten Öffnen automatisch in den Vordergrund geholt. Wenn bereits ein Zweitfenster geöffnet ist und der Benutzer im Ursprungsfenster einen weiteren Popup-Link aktiviert, bleibt dieses in manchen Fällen im Hintergrund. Zur Abhilfe wird das Popup-Fenster mithilfe der focus-Methode in den Vordergrund geholt.

Anwendung

Die so definierte Helferfunktion oeffnefenster wird nun beim Klick auf einen Link ausgeführt, der sich in einem neuen Fenster öffnen soll. Anfangs sieht der Link folgendermaßen aus:

<a href="foo.html">Linktext<a>

Es wird nun der Event-Handler onclick hinzugefügt. In diesem Attribut wird die Funktion oeffnefenster aufgerufen:

<a href="foo.html" onclick="oeffnefenster(this.href); return false">Linktext<a>

Der negative Rückgabewert return false unterdrückt die Standard-Ereignisbehandlung für den Klick auf den Hyperlink. Damit wird verhindert, dass nach dem Öffnen des Popup-Fensters zusätzlich das Linkziel im Ausgangsfenster aufgerufen wird.

Die Funktion oeffnefenster erwartet wie gesagt als Parameter eine Webadresse (URL). Anstatt diese zweimal im Quelltext zu notieren, nämlich im href-Attribut und als Parameter des oeffnefenster-Aufrufs, wird kurzerhand this.href übergeben. this zeigt hier auf das a-Elementobjekt und href liefert den Wert des gleichnamigen Attributs. Somit muss beim späteren Anpassen der Zieladresse lediglich das href-Attribut geändert werden. Dies legt gleichzeitig Seite fest, die im Popup geöffnet wird.

Die hier vorgestellte Lösung funktioniert auch, wenn der Browser JavaScript nicht unterstützt oder JavaScript deaktiviert ist. In diesem Fall wird kein neues Fenster geöffnet, sondern der Link einfach im vorhandenen geöffnet. Die Inhalte bleiben dadurch in jedem Fall zugänglich.

Beispiel

Fenster öffnen. Aktivieren Sie den Link, um das Fenster zu öffnen.

Nachteile

Popups passen nicht zum Tabbed Browsing

Popup-Fenster stammen aus den 90er-Jahren und passten zu den damaligen Benutzeroberflächen der Browser. Zudem waren die Möglichkeiten von HTML, CSS und JavaScript sowie serverseitigen Techniken sehr beschränkt, sodass Popup-Fenster eine verbreitete Möglichkeit waren, um Inhalte zu organisieren und zu präsentieren.

Seitdem haben sich die Benutzeroberflächen der Browser grundlegend geändert: Moderne Browser haben nur noch ein Fenster und darin Tabs (Registerkarten) zur Darstellung mehrere Webseiten. Dadurch wird der Bedienkomfort entscheidend verbessert. Der Benutzer gewinnt die Kontrolle über die Fensterverwaltung. Er öffnet Links eigenständig in neuen Tabs, wenn er es möchte. Separate Browserfenster mit fester Größe, die ihrer Bedienelemente beraubt sind, passen nicht in dieses Konzept.

Das Öffnen von mehreren unabhängigen Fenstern bietet dem Benutzer weder Orientierung noch Übersicht, sondern stiftet Verwirrung durch eine unklare Benutzerführung. Der Seitenbesucher wird an einer Navigation gehindert, bei der paralleles Lesen selbstgewählt ist und somit individuell verständlich bleibt.

Popup-Fenster sind nicht anpassungsfähig

Die erzeugten Popup-Fenster haben meist eine feste, unveränderbare Größe und können nicht flexibel auf Umgebungsbedingungen und Benutzervorlieben reagieren. Auch ein dynamisches Anpassen der Popup-Größe kann dieses Unvermögen nicht wettmachen – es würde nur zu weiteren Unstimmigkeiten führen. Somit sind Popups und deren Inhalte zwangsläufig nicht anpassungsfähig. Dies kann die grundlegende Lesbarkeit der Seite gefährden.

Die Zurück-Navigation wird unmöglich

Eine gravierender Nachteil ist, dass die Zurück-Navigation des Browsers funktionsunfähig wird. Bei der Bedienung des Webs sind zwei Aktionen grundlegend: Das Aktivieren eines Hyperlinks durch »Point and Click« und die Zurück-Funktion. Der Umgang mit mehreren eigenständigen Fenstern hingegen durchkreuzt dieses bewährte, leicht zu erlernende Bedienkonzept.

Beschnittene Browserfunktionen

Bei Popup-Fenstern werden häufig wesentliche Bedienelemente (Menü-, Symbol-, Adress- und Statusleiste) deaktiviert. Der Benutzer kann dies in der Regel nicht unterbinden. Durch diese Gängelung ist die Bedienung des Browsers derart eingeschränkt, dass es weder möglich ist, die aktuelle Adresse des Dokuments in Erfahrung zu bringen, noch die angezeigte Seite zu den Lesezeichen hinzuzufügen, sie zu drucken oder abzuspeichern. Dies zeigt deutlich, dass Popup-Fenster zur gelungenen Interaktion mit dem Benutzer ungeeignet sind. Sie erschweren den Umgang mit der Seite und das Aufnehmen der Inhalte.

Keine einheitliche Darstellung und verschenkte Kompatibilität

Manche glauben, ein in der Breite und Höhe festes Popup-Fenster könne eine einheitliche, pixelgenaue Darstellung bei allen Benutzern erreichen. Dies beruht auf einer einseitigen Sicht auf das Web. Vielmehr zerstört die Fixierung durch ein unflexibles Popup-Fenster die Kompatibilität einer Website. Dadurch leidet der Bedien- und Lesekomfort, Besucher werden gestört und unter Umständen ausgeschlossen. Anpassungsfähigkeit bedeutet jedoch nicht, dass auf eine hochwertige und durchdachte Präsentation verzichtet werden muss.

Ausschließliche Berücksichtigung von Desktop-Computern

Websites sollten mit jedem denkbaren Ausgabegerät und jedem Browser so gut aufnehmbar sein, wie es die Inhalte der Seite und die Fähigkeiten der Zugangstechnik erlauben – sei es ein Desktop-Rechner, ein Laptop oder Netbook, ein Smartphone, ein Sprachbrowser oder eine Braillezeile. Alternative Zugangstechniken, vor allem mobile, finden immer breitere Anwendung. Die Interoperabilität einer Website ist damit verstärkt ein Qualitätsmerkmal.

Fenstermanipulationen werden zunehmend unterbunden

Manche Zugangstechniken kennen weder das klassische Konzept mehrerer eigenständiger Fenster, noch können sie JavaScript ausführen. Einige Browser erlauben das generelle Deaktivieren von window.open-Fenstern, sodass die Zieladressen einfach im selben Fenster geöffnet werden. Viele Browser unterbinden Manipulationen der Fenstereigenschaften, sodass z.B. das Deaktivieren der Adressleiste und der Statusleiste ignoriert werden. Aus Benutzerfreundlichkeit ignorieren Firefox und Opera die Angabe resizable=no im dritten window.open-Parameter, wodurch jederzeit eine Größenänderung des Fensters möglich ist.

Zusammenfassend ist festzustellen, dass das Konzept der Popup-Fenster überholt und unter heutigen Bedingungen widersprüchlich ist.

Alternativen

Paralleldarstellung über target="_blank"

Für eine Parallelanzeige existiert das eingangs erwähnte target="_blank". Dies verzichtet darauf, die Eigenschaften des neuen Fensters festzulegen. Moderne Browser öffnen bei Links mit target="_blank" einen neuen Tab.

Zwar ist es für einige Benutzer möglich, target="_blank" unwirksam zu machen, falls die jeweiligen Links eindeutig gekennzeichnet sind. Nichtsdestoweniger treffen viele der angesprochenen Probleme auch auf target="_blank" zu. Beispielsweise wird der Navigationspfad durchbrochen, die Zurück-Navigation wird unwirksam und man greift in die eigenständige Tab-Verwaltung des Benutzers ein.

Die Web-Zugänglichkeitsrichtlinien raten von der Erzeugung neuer Fenster ab, solange der Benutzer keine Möglichkeit hat, dies auf einfache Weise zu unterdrücken beziehungsweise zu steuern. Außerdem sollte der Benutzer bei jedem Link darauf aufmerksam gemacht werden, dass dieser sich in einem neuen Fenster oder Tab öffnen wird.

Paralleldarstellung über Frames

Wenn es darum geht, mehrere Informationen gleichzeitig nebeneinander anzuzeigen und wenn eine Integration in ein Dokument unmöglich scheint, so wäre ein Framesets eine mögliche Lösung.

Die Verwendung von Frames hat jedoch in der Regel schwerwiegende, nicht kompensierbare Benutzbarkeitsprobleme zur Folge. Daher erweisen sich Frames in den meisten Fällen nicht als akzeptable Lösung. Nicht ohne Grund sind Framesets aus dem Web weitgehend verschwunden.

Selbstbestimmte statt erzwungene Paralleldarstellung

Wenn beispielsweise auf Zusatzinformationen wie externe Quellen, Randbemerkungen, Fußnoten verwiesen wird, ist es nicht zwangsläufig vorteilhaft, auf einer parallelen Darstellung zu bestehen und über den Kopf des Benutzers hinweg neue Fenster zu öffnen.

Dem Benutzer sollte die Kompetenz und Freiheit zugestanden werden, selbst zu entscheiden, ob er eine Seite in einem neuen Fenster parallel betrachten möchte. Ihm sollte darin vertraut werden, dass er die wesentlichen Navigationsfunktionen seines Browsers bedienen kann, sodass er zwischen mehreren Tabs eigenständig wechseln kann. Der Autor sollte dem Benutzer daher Vorschläge machen und Hilfestellung geben, anstatt ihn vor vollendete Tatsachen zu stellen.

Lightboxen – Dokumentinterne JavaScript-Layer

Die Verwendung von Popup-Fenstern ist stark zurückgegangen, seit es sogenannte Lightbox-Scripte gibt. Diese ermöglichen, beliebige Inhalte in einer Ebene (layer) darzustellen, die über dem normalen Inhalt liegt. Der Rest des Dokuments wird beim Anzeigen des Layers ausgegraut. Der Layer verschwindet wieder, wenn zum Hauptinhalt zurückgekehrt wird. Auf ein neues Browserfenster wird gänzlich verzichtet.

Lightboxen sind sehr leistungsstark und vielseitig. Der Vorteil solcher Scripte ist, dass sie meist »unobtrusive« umgesetzt sind. Das heißt, es ist keine Vermischung von HTML und JavaScript nötig und bestenfalls bleiben alle Inhalte zugänglich, auch wenn JavaScript nicht unterstützt wird.

Doch die Idee hat einige Schwächen und die Umsetzungen sind teilweise äußerst problematisch. Zum Beispiel ist es nicht immer möglich, den in der Lightbox gezeigten Inhalt mit einer URL zu adressieren und zu verlinken. Zudem wird ein eigenes Interface eingeführt, das keinen Gebrauch von der herkömmlichen Browser-Navigation macht. Dies ist für Benutzer noch ungewohnter als das Öffnen gewöhnlicher Fenster.

Lightboxen sind oft grafisch opulent, setzen Aufklapp- und Einblend-Effekte ein und reagieren dadurch langsam. Diese Effekte werden schnell als störend empfunden. Die JavaScripte, die für eine Lightbox nötig sind, umfassen gerne 100 Kilobyte. Dies verschlechtert auch die Ladeperformance der Seite. Die Artikel Lightboxen – das neue Popup? und Barrierefreie Lightboxen? diskutieren diese und weitere Nachteile.

Webanwendungen, Ajax und Dialogfenster

Heutzutage erfüllen stark interaktive Webanwendungen die Aufgaben klassischer Desktop-Anwendungen. Deren mit JavaScript umgesetzte Benutzeroberfläche orientiert sich an gewöhnlichen Anwendungsprogrammen und bewegt sich jenseits der Konventionen herkömmlicher Websites.

Das Konzept mehrerer Fenster nutzen Anwendungsprogramme schon lange äußerst erfolgreich. Zahlreiche Webanwendungen adaptieren dieses Konzept. Diese »Fenster« müssen allerdings nicht mit mehreren Browserfenstern realisiert werden, eine Umsetzung in einem Browserfenster wäre ebenso möglich. Mit Konzepten wie AJAX und dokumentinternen Dialogfenstern lässt sich ein Interface entwickeln, bei dem das klassische Navigieren wegfällt, ohne dass dessen Vorteile verworfen werden.

Integrative Lösungen und flexible Benutzeroberflächen

Die Verwendung von Popups weist oftmals auf eine mangelhafte Informationstrukturierung hin: Wenn der Navigationsfluss unklar ist, scheinen Popup-Fenster die Rettung zu sein. Doch Popups erschweren den Zugang zu den Informationen. Webseiten-Betreiber sollten neben der Qualität der Inhalte auf eine intuitive Organisation und Präsentation Wert legen, die möglichst jedem Interessierten gerecht wird.

Die genannten Alternativen bieten zwar einige Vorzüge gegenüber JavaScript-Popups, jedoch treiben sie mitunter den Teufel mit dem Beelzebub aus. Am wenigsten Probleme bringt ein Projektaufbau und eine Präsentation mit sich, die Aufgaben, die bisher durch Popups gelöst wurden, integrativ lösen. Auf diese Weise lässt sich eine Site-Struktur entwickeln, die den komplexen Informationen gerecht wird, ohne dass das Interface unintuitiv wird. Somit werden Popup-Fenster, Frames und target="_blank" unnötig, wodurch sich Benutzerfreundlichkeit und Zugänglichkeit verbessern.

Letzte Änderung: 13.02.2011 — Version 5