Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

JsPopUp - Neue Browserfenster komfortabel und unaufdringlich

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

JsPopUp - Neue Browserfenster komfortabel und unaufdringlich

Popups sind beliebt und auf vielen Webseiten zu finden. Selten werden sie intelligent eingebunden. Dirk Ginader zeigt, wie man einfach, wirkungsvoll und intelligent ein Popup öffnen kann.

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

Weiterführende Links

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

Kommentare

FJ
am 19.12.2006 - 09:38

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?!

Permanenter Link
Manuel Bieh

Manuel Bieh (Webkraut)
am 19.12.2006 - 09:46

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 19.12.2006 - 10:35

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 :-)

Permanenter Link

Matt
am 19.12.2006 - 11:20

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...

Permanenter Link

Edoardo
am 19.12.2006 - 13:34

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 19.12.2006 - 13:37

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.

Permanenter Link

Daniel
am 19.12.2006 - 14:35

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.

Permanenter Link

Glödu
am 19.12.2006 - 19:53

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.

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 20.12.2006 - 07:30

@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 :-)

Permanenter Link

Glödu
am 20.12.2006 - 14:26

@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.

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 20.12.2006 - 17:40

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

Permanenter Link

Matt
am 22.12.2006 - 11:47

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?

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 22.12.2006 - 18:01

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?

Permanenter Link

Thomas
am 23.12.2006 - 12: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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 25.12.2006 - 08:19

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 :-)

Permanenter Link

Thomas
am 27.12.2006 - 16:55

Hallo Dirk,

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

Viele Grüße
Thomas

Permanenter Link

Klaus
am 13.02.2007 - 00:05

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 13.02.2007 - 08:48

@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?

Permanenter Link

Klaus
am 13.02.2007 - 09:33

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 13.02.2007 - 10:35

@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...

Permanenter Link

nos
am 02.04.2007 - 10:50

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)?

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 02.04.2007 - 12:37

@ 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 :-)

Permanenter Link

Uwe
am 06.04.2007 - 08:26

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

Permanenter Link

Henning
am 23.04.2007 - 15:43

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 23.04.2007 - 16:14

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

Permanenter Link

darki777
am 29.08.2007 - 09:34

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

Permanenter Link

darki777
am 29.08.2007 - 09:35

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

Gruß darki

Permanenter Link

darki777
am 30.08.2007 - 08:36

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

Gruß darki

Permanenter Link

Traser
am 18.09.2007 - 16:54

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

Permanenter Link

Ralf Wittrock
am 03.10.2007 - 00:00

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 03.10.2007 - 10:07

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

Permanenter Link

Ralf Wittrock
am 05.10.2007 - 19:37

Hallo Dirk,

danke für die Positive Nachricht!

Freue mich schon auf die neue Version.

Ralf Wittrock

Permanenter Link

Ralf Wittrock
am 20.10.2007 - 08:43

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

Permanenter Link
Dirk Ginader

Dirk Ginader (Autor)
am 22.10.2007 - 11:48

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) :-)

Permanenter Link

Ralf Wittrock
am 23.10.2007 - 22:53

Hallo,

danke das ist eine Super Nachricht.

Gruß Ralf

Permanenter Link

Joerg
am 11.02.2008 - 23:34

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

Permanenter Link

Joerg
am 11.02.2008 - 23:35

Da ist der Code:

Permanenter Link

ThomasO
am 21.04.2008 - 12:02

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 ;)

Permanenter Link

Die Kommentare sind geschlossen.