Webkrauts: Für mehr Qualität im Web.

Artikel

JsPopUp – Neue Browserfenster komfortabel und unaufdringlich

Immer wieder wird es bei Webprojekten notwendig Links zu Webseiten oder Dokumenten in einem neuen Fenster (PopUp) zu öffnen. In Javascript gibt hierzu genauso viele Lösungen wie es Entwickler gibt. Die meisten sind jedoch sehr kompliziert in Ihrer Anwendung, widersprechen in Ihrem Aufbau den heute aktuellen Webstandards und werden im allgemeinen sogar als Störend empfunden.

Die hier vorgestellte Javascript-Klasse wurde für diesen Artikel entwickelt um zu zeigen, daß PopUps nicht generell böse sein müssen.

Die Basismöglichkeiten mit Javascript

mit dem “javascript:”-Pseudoprotokoll:

<a href="javascript:void(window.open('http://www.webkrauts.de'));"> Fenster öffnen</a>

mit einem “blinden” Link und dem onclick-Event :

<a href="#" onclick="window.open('http://www.webkrauts.de');return false">Fenster öffnen</a>

…und funktionieren würden beide Ansätze auch – aber:

… bei einem User mit einem Browser ohne Javascript-Unterstützung würde sich das PopUp nicht öffnen. Noch schlimmer ist aber, dass die gewünschte Seite, ohne jedes Feedback an den User, überhaupt nicht geladen werden würde. Wenn der Link auch ohne Javascript funktioniert und keine Fehlermeldung erzeugt ist die Verwendung in Ordnung.

Dieser Link würde auch ohne Javascript funktionieren:

<a href="http://www.webkrauts.de" onclick="window.open(this.href);return false">Fenster öffnen</a> Fenster öffnen

Aber auch diese Version hat noch diverse Nachteile:

Bei der Verwendung in einem CMS z.B. wären hierbei auch für Redakteure Javascript-Kenntnisse notwendig. Sollte das Fenster zusätzliche Eigenschaften, wie z.B. eine festgelegte Grösse, benötigen, wird der Code sehr schnell noch unübersichtlicher.

Die Vermischung von HTML und Javascript stellt ebenfalls ein grosses Problem dar. Inhalt (HTML), Gestaltung (CSS) und Verhalten (Javascript) sollten generell voneinander getrennt werden [1][2].

Ein weiteres Problem ist auch, dass der Benutzer nicht darüber informiert wird, dass sich der Link in einem neuen Fenster öffnen wird.

Wie Screenreader mit PopUps umgehen

Die aktuellen Screenreader können, im Gegensatz zur herrschenden Meinung, sehr wohl Javascript interpretieren. Dies hat hier aber eher Nachteile als Vorteile. Im letzten Beispiel, würde ein aktueller Screenreader tatsächlich ein neues Fenster öffnen aber den User nicht darauf hinweisen können. Für diesen hat es weiterhin den Anschein als wäre nichts passiert.

Was wäre also ideal?

Eine ideale Lösung muss unbedingt einfach anwendbar sein. Das Hinzufügen eines “class”-Attributs wäre ein guter Ansatz, den auch die meisten CM-Systeme ermöglichen. Zusätzlich kann dem Link mit der Klasse über CSS eine besondere Formatierung zugerwiesen werden (z.B. ein Icon das den User über das neue Fenster Informiert).

Sinnvoll wäre es auch, wenn verschiedene Fenstertypen (z.B. feste Fenstergrössen oder Fenster ohne Adresszeile) erzeugt werden können. Wenn diese Fenstertypen zentral definiert werden könnten, könnten diese leicht in einer ganzen Website genutzt werden.

Der Nutzer sollte darüber informiert werden, dass der Link sich in einem neuen Fenster öffnen wird. Ein Hinweistext im “title”-Attribut wäre eine gute Lösung. Allerdings nur, wenn Javascript auch wirklich aktiviert ist und das PopUp geöffnet werden kann, wenn nicht, wäre der Hinweis wiederum sehr verwirrend.

Abschliessend wäre es natürlich noch toll, wenn gar kein Javascript im HTML-Dokument stehen müsste.

JsPopUp – (m)ein Lösungsansatz

JsPopUp ist der Name der Javascript-Klasse, die ich für diesen Artikel entwickelt habe. Sie bietet Lösungen für die genannten Probleme und ist sehr leicht anzuwenden. Die benötigen Zeilen Javascript werden einfach innerhalb des Head-Bereichs eingebunden und werden dann automatisch ausgeführt.

Die Anpassungen für die eigene Seite können dann entweder direkt in dem aktuellen Dokument oder (besser noch) in einer weiteren externen Javascript-Datei erfolgen. Dadurch kann man das Script einfach für ein gesamtes Web einsetzen.

Für die Auszeichnung der PopUp-Links habe ich mich für das “class”-Attribut entschieden, da dieses im Vergleich zu dem ebenfalls geeigneten “rel”-Attribut zusätzlich auch über CSS gestylt werden kann.

Beispiel 1 (Minimal):

Dieses Beispiel wird alle Links auf der Seite die mit der Klasse “popup” versehen wurden, so verändern, dass diese in einem neuen Fenster geöffnet werden. Zusätzlich wird der Text “Dieser Link wir in einem neuen Fenster geöffnet” in das Title-Attribut geschrieben, sodass der Nutzer weiss, was passiert wenn er klickt. Hinweis: der Einfachkeit-Halber wurde hier der window.onload-Event verwendet. Empfehlenswert statt dessen wäre ein moderner DomLoaded-Event [3].

1. Einbindung der Klasse im Head:
   

   <script language="javascript" type="text/javascript" src="popup.js"></script>

2. Aufruf der Klasse:
   

   <script type="text/javascript">
window.onload = function(){
popup = new PopUp();
popup.apply();
}
</script>

3. Ein Beispiel-Link
   

   <a class="popup" href="http://www.webkrauts.de">Link</a>

Beispiel 2 (Erweiterte Funktionen)

Dieses erweiterte Beispiel zeigt, wie man zusätzliche Fenstertypen definieren kann. Man übergibt der Methode “addType()” ein Objekt mit den gewünschten Eigenschaften. Dabei ist jede Eigenschaft bis auf “name” optional (“name” wird immer benötigt, da dieser dem class-Attribut des PopUp-Links entspricht). Verfügbar sind derzeit folgende Eigenschaften mit den vordefinierten Standardwerten (weitere sind geplant):

• name:"MeinNeuerFensterTyp" (der Name des neuen Fenstertypes ohne Leerzeichen und Sonderzeichen)
• width:800 (die Breite des PopUps in Pixeln)
• height:600 (die Höhe des PopUps in Pixeln)
• top:0 (der Abstand des PopUps vom oberen Bildschirmrand in Pixeln)
• left:0 (der Abstand des PopUps vom linken Bildschirmrand in Pixeln)
• location:false (true oder false. Blendet die Adresszeile des neuen Fensters ein oder aus)
• resizable:false (true oder false. Erlaubt oder verbietet des Verändern der Fenstergröße durch den Nutzer)
• scrollbars:false (true oder false. Blendet den Rollbalken des neuen Fensters ein oder aus)
• status:false (true oder false. Blendet die Statuszeile des neuen Fensters ein oder aus)
• toolbar:false (true oder false. Blendet die Werkzeugzeile des neuen Fensters ein oder aus)
• menubar:false (true oder false. Blendet die Menüzeile des neuen Fensters ein oder aus)
• center:true (true oder false. Zentriert das neue Fenster automatisch in der mitte des Bildschirms (Achtung: Überschreibt die Werte “top” und “left” wenn true!))
• title:"Dieser Link wir in einem neuen Fenster geöffnet" (Dieser Text wird bei Überfahren des Links mit der Maus angezeigt)

In dem folgenden Beispiel wird der zusätzliche Fenstertyp “pdf” definiert. Fügt man Links nun zusätzlich zu der Klasse “popup” auch die Klasse “pdf” hinzu so werden diese mit dem geänderten Title-Text angezeigt und in einem neuen Fenster mit den angegebenen Eigenschaften geöffnet. Natürlich kann man auch diese Links über CSS wieder angepasst stylen (hier z.B. mit einem PDF-Icon)

1. Einbindung der Klasse im Head:
   

   <script language="javascript" type="text/javascript" src="popup.js"></script>

2. Aufruf der Klasse:
   

   <script type="text/javascript">
window.onload = function(){
popup = new PopUp();
popup.addType({
name: "pdf",
width: 800,
height: 500,
resizable: true,
title: "Dieses PDF wird in einem neuen Fenster angezeigt"
});
popup.apply();
}
</script>

3. Ein Beispiel-Link
   

   <a class="popup" href="http://www.webkrauts.de">Link</a>
<a class="popup pdf" href="http://www.webkrauts.de">Link</a>

Download und aktuelle Infos der Klasse

• Projektseite: blog.ginader.de/dev/popup.html

Weiterführende Links

1. Barrierefreies Javascript .
2. The Behavior Layer (Englisch) .
3. Blogpost über Events die das Vorhandensein des DOMs prüfen

Zum Autor

Dirk Ginader ist Technischer Leiter der Unit Interactive von Bartenbach & Co. in Mainz. Er ist leidenschaftlicher Webworker is Sachen (X)HTML, CSS, Javascript, Dom, Ajax, PHP, Flash usw. Sein täglicher (stark Internet-lastiger) Output ist in seinem Blog: “web output” zu lesen.

Info:

JsPopUp – Neue Browserfenster komfortabel und unaufdringlich ist Beitrag Nr. 90

Autor:

Dirk Ginader am 19. Dezember 2006 um 00:05

Kategorie:

Adventskalender 2006

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   ich würde es nicht mit dem class atribut machen sondern mit "rel" z.b
   
..a href="http://www.webkrauts.de" rel="popup">Link...


   was meinst du?!

   Kommentar by FJ - 19. Dezember 2006 um 09:38

2. 2.
   

   ist meinem empfinden nach üblicher das mit dem rel attribut zu machen. nichtsdestotrotz schöner artikel, schöne idee, gutes script!

   Kommentar by manuel - 19. Dezember 2006 um 09:46

3. 3.
   

   Ich habe ganz Bewusst daß class-Attribut dem rel-Attribut vorgezogen, da es sehr einfach stylebar ist, und die verschiedenen PopUp-Typen so auch optisch gut unterscheidbar sind.
   Zusätzlich unterstützen die meisten WYSIWYG-Editoren das class-Attribut (ich habe noch keinen gesehen, der das rel-Attribut unterstützt), was es so auch HTML-unkundigen Redakteuren ermöglicht Ihre Links als PopUp auszuzeichnen.
   Dennoch danke für Eure Hinweise

   Kommentar by Dirk Ginader - 19. Dezember 2006 um 10:35

4. 4.
   

   Sehr schöner Ansatz.

   Einziger Nachteil auch hier: Normale Links oder auch Links, die ein target haben, kann ich durch Drücken entsprechender Tastenkombinationen trotzdem so öffnen, wie ich das gerne hätte (neues Fenster, neuer Tab etc.).

   Hier öffnet sich leider zwangsläufig das durch Javascript generierte Fenster…

   Kommentar by Matt - 19. Dezember 2006 um 11:20

5. 5.
   

   Das ist vor allem dann nervig, wenn ein Link auf ein PDF unnötigerweise ein neues, leeres Tab öffnet.

   Kommentar by Edoardo - 19. Dezember 2006 um 13:34

6. 6.
   

   Ja, das ist leider wahr. Die Sinnhaftigkeit einen Link zu einem PopUp zu machen, liegt natürlich weiterhin beim Ersteller.
   Es gibt aber immer wieder Situationen, in denen ich z.B. einfach nicht will, daß ein Fenster eine andere Größe/Position/Menüauswahl etc. hat, als die von mir vorgesehene.

   Kommentar by Dirk Ginader - 19. Dezember 2006 um 13:37

7. 7.
   

   Ein guter und interessanter Artikel, ich bin ebenfalls der Meinung, dass Popups nicht immer böse sind. Dieses denken ist in meinen Augen ignorant und kurzsichtig. Es gibt Fälle wo Popups sinnvoll sind, einen Mehrwert bieten und Vorteile haben.

   Kommentar by Daniel - 19. Dezember 2006 um 14:35

8. 8.
   

   Ich verwende diese Methode seit einiger Zeit auf verschiedenen Websites, vor allem für externe Links, die Klasse nenne ich dabei "extern". Nun machte ich aber vor kurzem die Entdeckung, ich glaube, das war mit Opera für Mac (oder war's mit IE 7? – kann das im Moment nicht überprüfen), dass die Standardkomfiguration PopUps blockt und damit im Browser nach einem Klick kommentarlos nichts passiert. Das hat mich verblüft, weil z. B auf Safari trotz geblockten PopUps diese Lösung geht.

   Ich vermute, diese Neue-Fenster-Öffnungs-Scrips werden in Zukunft immmer mehr Probleme bereiten, oder dem unbedarften Besucher suggerieren, dass die Links nicht richtig funktionieren.

   Kommentar by Glödu - 19. Dezember 2006 um 19:53

9. 9.
   

   @Glödu:
   Es würde mich sehr interessieren, in welchem Browser Du diesen Effekt beobachten konntest.
   Eigentlich sollten PopUp-Blocker generell nur greifen, wenn ein Fenster ohne vorherige Userinteraktion (z.B. Klick) geöffnet wird. Wenn Du also ein anderes Verhalten beobachten konntest, würde ich Dich bitten, dies hier noch einmal detailliert zu kommentieren. Danke

   Kommentar by Dirk Ginader - 20. Dezember 2006 um 07:30

10. 10.
    

    @Dirk

    Das Verhalten beobachtete ich in Opera für Mac, wo die Standardkonfiguration sämtliche PopUps blockiert. Gestern installierte ich die neuste Version 9.1, und bei der wird dann wenigstens beim erfolglosen Klick oben rechts ein Hinweisfensterchen eingeblendet.

    Um eventuellen Missverständnissen vorzukommen: ich wollte keinesfalls gegen deinen Artikel schreiben.

    Kommentar by Glödu - 20. Dezember 2006 um 14:26

11. 11.
    

    @Glödu:
    Vielen Dank für die Info. Ich werde mir den Mac-Opera mal vorknöpfen

    Kommentar by Dirk Ginader - 20. Dezember 2006 um 17:40

12. 12.
    

    Also hier funktioniert das mit Opera. Lediglich die Links popup und popup+pdf gehen direkt im neuen Tab auf, alles andere öffnet wie vorgesehen, ohne geblockt zu werden (Opera 9.02 und Opera 9.10).

    Schon was geändert, Dirk?

    Kommentar by Matt - 22. Dezember 2006 um 11:47

13. 13.
    

    Hi Matt, danke der Nachfrage. Nein, ich habe noch nichts geändert. Ich selbst konnte den Effekt auf meinem frisch installiertem MAC Opera 9 auch nicht reproduzieren. Spannend, dass bei Dir alle Links funktionieren außer "popup" und "popup+pdf". Bekommst Du Fehlermeldungen?

    Kommentar by Dirk Ginader - 22. Dezember 2006 um 18:01

14. 14.
    

    vielen Dank für die schöne Idee. Leider funktioniert sie bei mir nur im Firefox und nicht im IE 7.0.

    Hier ist der Link: Link

    Viele Grüße
    und fröhliche Weihnachten
    Thomas

    Kommentar by Thomas - 23. Dezember 2006 um 12:14

15. 15.
    

    Hallo Thomas,
    einen winzigen aber bösen Leichtsinnsfehler habe ich in Deinem Code gefunden:
    Hier Dein Aufruf:
    window.onload = function(){
popup = new PopUp();
popup.addType({
name: "popup",
width: 700,
height: 600,
resizable: false,
});
popup.apply();
}

    Du hast nach der letzten Property, die Du übergeben hast (resizable: false,), fälschlicherweise noch ein Komma eingefügt. Hier ist ausnahmsweise der Firefox mal toleranter als der IE und führt den Code trotzdem aus, der IE bricht die Ausführung ab.

    So sieht der Aufruf aus, der fehlerfrei funktioniert:
    window.onload = function(){
popup = new PopUp();
popup.addType({
name: "popup",
width: 700,
height: 600,
resizable: false
});
popup.apply();
}
    Schöne Weihnachten

    Kommentar by Dirk Ginader - 25. Dezember 2006 um 08:19

16. 16.
    

    Hallo Dirk,

    besten Dank für die schnelle Hilfe, die ich heute als nachträgliche Bescherung im Netz fand.

    Viele Grüße
    Thomas

    Kommentar by Thomas - 27. Dezember 2006 um 16:55

17. 17.
    

    Hallo,

    bei mir klappt das mit dem POPUP leider auch nur im Firefox (2.0) und im Opera (9.02).

    Im IE7 öffnen sich die Links in einem neuer Registerkarte.

    Hier der Link zur Seite mit PopUp-Links:
    Link

    Bitte um Hilfe, danke.

    Lg,

    Klaus

    Kommentar by Klaus - 13. Februar 2007 um 00:05

18. 18.
    

    @Klaus:
    Hm – den beschriebenen Effekt im IE7 kann ich leider gar nicht nachvollziehen. Mein IE7 macht brav was er soll. Bekommst Du irgendwelche Javascript-Fehler angezeigt? Hast Du eine zusätzliche Toolbar installiert, die eventuell querschiesst?

    Kommentar by Dirk Ginader - 13. Februar 2007 um 08:48

19. 19.
    

    Hallo Dirk,

    welche "Registerkarteneinstellungen" hast du bei PopUp's im IE7?

    Ich habe "PopUps immer in neuer Registerkarte öffnen".

    Nur dachte ich, das Script erzwingt dennoch im IE7 das PopUp, klappt ja im Opera und Firefox auch…

    Lg,

    Klaus

    Kommentar by Klaus - 13. Februar 2007 um 09:33

20. 20.
    

    @Klaus,
    nein, der Internet Explorer ist bei dieser Einstellung sehr restriktiv. Im Firefox gibt es in einer der diversen Tab-Extensions auch so eine Einstellung die nachhaltig dafür sorgt, dass Popups in Tabs geöffnet werden. Da ist Javascript absolut machtlos – wenn der User nicht will kann Javascript (zum Glück) nichts machen…

    Kommentar by Dirk Ginader - 13. Februar 2007 um 10:35

21. 21.
    

    Das Script klingt wirklich interessant. Wie bekomme ich es denn hin, dass, wenn der link auf das Popup erneut geklickt wird und schon offen hinter einem Fenster liegt, es nur nach vorn geholt wird, und sein Inhalt nicht erneut geladen wird (z. B. für einen Musikplayer)?

    Kommentar by nos - 2. April 2007 um 10:50

22. 22.
    

    @ nos:
    So etwas ist mit der aktuellen Version nicht möglich. Ich nehme das mal in die Feature-Request-List für die nächste Version auf – die ist schon recht voll

    Kommentar by Dirk Ginader - 2. April 2007 um 12:37

23. 23.
    

    Popups sind zwar manchmal von Vorteil, aber ich finde die Übertreibung von Werbung schrecklich. Da es immer mehr leute gab, die diese Möglichkeit ausgenutzt haben finde ich es gut das diese Popupblocker da sind.

    Werde auch in Zukunft keine Popups akzeptieren.

    Uwe

    Kommentar by Uwe - 6. April 2007 um 08:26

24. 24.
    

    Ist es auch möglich oder wird es auch möglich sein das Fenster fest rechts am Bildschirm zu positionieren?

    Kommentar by Henning - 23. April 2007 um 15:43

25. 25.
    

    @Henning:
    Bisher noch nicht eingebaut aber gerade eben in die Feature-Wishlist aufgenommen

    Kommentar by Dirk Ginader - 23. April 2007 um 16:14

26. 26.
    

    Hi,
    also bei mir funzt das Teil im IE6 sowie im IE7 nicht,
    bei allen anderen Browsern schon. Trotzdem danke für
    das nette Script.

    Gruß darki

    Kommentar by darki777 - 29. August 2007 um 09:34

27. 27.
    

    P.S. habe vergessen zu erwähnen dass ich im IE6 und IE7 nur weitergeleitet werde, glaube es liegt am "return".

    Gruß darki

    Kommentar by darki777 - 29. August 2007 um 09:35

28. 28.
    

    Sry für die Falschmeldung, habe es heute nochmal versucht, lag an den überhöhten Sicherheitseinstellungen.

    Gruß darki

    Kommentar by darki777 - 30. August 2007 um 08:36

29. 29.
    

    Hallo,
    vielen Dank, ich werde es bei unserem Shop mal ausprobieren.

    Kommentar by Traser - 18. September 2007 um 16:54

30. 30.
    

    Hallo,

    das Script gefällt mir gut! nur wie kann ich eine Autoresize anpassung machen, so das dass Popup sich immer zb. an die grösse des Fotos anpasst?

    Gruß Ralf Wittrock

    Kommentar by Ralf Wittrock - 3. Oktober 2007 um 00:00

31. 31.
    

    Hallo Ralf,
    Reine Bild-PopUps mit automatischer Größenanpassung wird eines der neuen Features der kommenden neuen Version des Scripts sein.

    Kommentar by Dirk Ginader - 3. Oktober 2007 um 10:07

32. 32.
    

    Hallo Dirk,

    danke für die Positive Nachricht!

    Freue mich schon auf die neue Version.

    Ralf Wittrock

    Kommentar by Ralf Wittrock - 5. Oktober 2007 um 19:37

33. 33.
    

    Hallo,

    ist schon etwas wegen der neuen Version in sicht?
    Ich benötige nähmlich dringend die Möglichkeit der Automatischen Größenanpassung für Bilder.

    Vieleicht gibt es ja die Möglichkeit eine Version vorab zu testen.

    Gruß Ralf Wittrock

    Kommentar by Ralf Wittrock - 20. Oktober 2007 um 08:43

34. 34.
    

    Hallo Ralf,
    bisher hatte ich dieses neue Feature nicht wirklich priorisiert. Das kann ich aber Dir zuliebe gerne ändern (dauert aber dennoch noch ein bisschen – sorry)

    Kommentar by Dirk Ginader - 22. Oktober 2007 um 11:48

35. 35.
    

    Hallo,

    danke das ist eine Super Nachricht.

    Gruß Ralf

    Kommentar by Ralf Wittrock - 23. Oktober 2007 um 22:53

36. 36.
    

    Ich möchte das bei mir ein neues Browserfenster geöffnet wird. Was muss ich bei diesem Code wo einfügen?

    Kommentar by Joerg - 11. Februar 2008 um 23:34

37. 37.
    

    Da ist der Code:

    Kommentar by Joerg - 11. Februar 2008 um 23:35

38. 38.
    

    Auf der Suche nach Infos zu Jquery nun hier auf dieses JsPopUp gestoßen.
    Wirklich interessant und verwenden werde ich es wahrscheinlich schon sehr bald

    Kommentar by ThomasO - 21. April 2008 um 12:02

Kommentar-Feed für diesen Beitrag

Entschuldige, das Kommentarformular ist zurzeit geschlossen.