Neues Fenster für Links unter XHTML 1.0 Strict und höher
Mal ganz davon ab ob es wirklich sinnvoll ist für Links ein neues Fenster zu öffnen, statt dem User selbst die Entscheidung zu überlassen, ich möchte schon das ein Besucher meiner Seite, selbige nicht verlässt und vergisst sobald er unbedarf einen Link geklickt hat. Bei einem XHTML Doctype ab Version 1.0 Strict ist die Angabe eines Target-Attributes bei Links jedoch nicht valide. Also muss eine andere Lösung her: JavaScript.
Jeder kennt die Popuplinks die über <a href=“#“ onclick=“window.open(‚…‘);“> aufgerufen werden. Dies erfüllt zwar seinen Sinn, ist aber nicht besonders elegant gelöst, da User mit ausgeschalteten JavaScript nämlich schlicht garnichts zu sehen bekommen. Gerade wer auf Accessibility setzt, und das tut man in der Regel wenn man sich nicht unbedarf für den XHTML Dokumententypen entschieden hat, sollte sich im klaren sein das viele (Seh)Behinderte JavaScript ausgeschaltet haben. Popup-Links wären für diese Gruppe von Usern also nicht sichtbar. Also muss eine andere Lösung her. Eine Lösung die bei Usern funktioniert die das Scripting im Browser ausgeschaltet haben, und bei Usern die dies nicht haben.
Und die Lösung ist einfacher als man vielleicht denkt. Es muss keine Funktion neu geschrieben werden, oder Links in Arrays geschrieben werden, oder oder oder…
Es reicht lediglich seinen Link in folgender Form aufzubauen
<a onclick=“window.open(this.href;’_blank‘); return false;“
href=“http://www.manuelbieh.de“>Linktext</a>
Dadurch wird dem Browser mit eingeschalteten JavaScript mitgeteilt, das er für den entsprechenden Link (this.href) ein neues Fenster (window.open) öffnen soll, mit dem Ziel ‚_blank‘. Danach wird alles weitere ignoriert, da ‚false‘ zurückgegeben wird.
Ist JS dagegen deaktiviert, wird lediglich der onclick-Teil des Links ignoriert (der Browser interpretiert eben kein JavaScript), und ganz normal der href-Link geöffnet.
So kann man der (wenn man so möchte) Usability wieder ein wenig entgegenwirken, ohne das die Zugänglichkeit oder die Validität eingeschränkt wird. Und wer möchte hat bei derartigen Links auch immernoch die Möglichkeit die Seite per Click mit der mittleren Maustaste im Tab zu öffnen.
//Update:
Da der Kommentar durch WordPress leider abgeschnitten wird, die Methode jedoch ebenfalls sehr einleuchtend ist, hier also nochmal die im Kommentar beschriebene Variante:
window.onload = function() {
links = document.getElementsByTagName('a');
for(i=0; i<links .length; i++) {
if(links[i].className.match(/external/)) {
links[i].target = '_blank';
}
}
}
Dem entsprechenden Link wird in diesem Beispiel eine Klasse (in diesem Fall ‚external‘) gegeben, woraufhin das Script weiß das es ein externer Link ist, der im neuen Fenster geöffnet wird. Funktionierte bei meinen Tests ebenfalls in allen gängigen Browsern.
Vielen Dank dafür nochmal an Herrn Heß! ;)
Veröffentlicht: 16.01.2005, 03:20 Uhr
Rubrik:
Tags:
Diskussion: 10 Kommentare
Social Media:
10 Kommentare zu “Neues Fenster für Links unter XHTML 1.0 Strict und höher”
Die Trackback-URL lautet
Januar 19th, 2005 at 13:16
[…] en ersten Einträgen dieser Woche getan, denke ich. Auch für die Zukunft hab […]
Mai 13th, 2005 at 18:31
[…] elöst, mit einer Methode die ich hier bereits einmal beschrieben habe. Ich l […]
Januar 16th, 2005 at 10:15
Ich habe einmal für Dr. Web einen Artikel zu diesem Thema geschrieben:
Es lebe die Freiheit: Ersatz für das Target-Attribut
Januar 16th, 2005 at 13:34
Oh nicht schlecht. Kannte ich noch nicht. Hab meine Infos mal irgendwo bei Eric Meyer gefunden. Kam mir nur in den Sinn einen Text darüber zu schreiben, weil ich finde das viel zu wenig Leute diese Technik anwenden, und bei Popups immernoch die Variante benutzen, das als href einfach nur ‚#‘ oder ‚javascript:window.open…‘ angegeben wird.
Finde ich schade, da ich mittlerweile aus Reflex mit der mittleren Maustaste auf Links klicke.
Januar 19th, 2005 at 23:30
Eine andere Alternative wäre noch, das automatisch per onload-Handler erledigen zu lassen. Da man ja – zumindest mache ich das so – den externen Links ein Symbol voranstellt, was bei mir per CSS-Klasse geschieht, könnte man diesen Links per JS ein Target zuweisen. Z.b. so:
window.onload = function() {
links = document.getElementsByTagName('a');
for(i=0; i
Januar 20th, 2005 at 11:44
Die Variante war mir neu. Und sieht ebenfalls sehr praktisch aus. :)
Mai 15th, 2005 at 11:41
onclick="window.open(this.href;’_blank’); return false;
Besser wäre folgendes:
onclick="!window.open(this.href;’_blank’);"
Der Unterschied besteht darin, dass es ja möglicherweise User gibt, die zwar JavaScript aktiviert haben, bei denen aber window.open nicht greift – die bekommen dann gar nichts zu sehen.
Mai 15th, 2005 at 11:48
ja, schon. allerdings wird der link bei klick dann einmal im neuen fenster, und einmal im gleichen fenster geöffnet.
September 13th, 2005 at 02:29
[…] Auch dies ist in meinen Augen eins der schwersten Verbrechen was Web-Usability angeht: Links über die der User keine Kontrolle hat. Solche Links haben meist die Form: <a href=“javascript:neuesFenster(‚start.html‘);“>, <a href=“javascript:void();“ onclick=“window.open(‚seite2.html‘);“ > oder ganz pervers: <a href=“javascript:showpage(6671379);“>. Doch auch das muss nicht sein. Dem User wird somit zum einen die Möglichkeit genommen Links während des Lesens im neuen Fenster (Shift+Mausklick), oder im neuen Tab (Strg+Mausklick oder mittlere Maustaste) zu öffnen, zum anderen haben User mit deaktiviertem JavaScript oftmals keine Chance durch die Seite zu navigieren. Dieses Usability-Ungeheuer trifft man all zu häufig in automatisch generierten Bildergalerien an, in denen es damit nicht möglich ist sich schnell hintereinander mehrere Bilder in Tabs anzeigen zu lassen. Aber auch komplexe CMS’ erzeugen teilweise derartige »Un-Links«. Dabei gibt es eine, unglücklicherweise immernoch recht unbekannte Möglichkeit, Links in neuen Fenstern zu öffnen, ohne dabei User auszuschließen oder in ihrer Entscheidungsfreiheit einzuschränken. Auch dazu schrieb ich bereits vor einiger Zeit einen kleinen Artikel »Neues Fenster für Links unter xhtml 1.0 strict« Jede Funktion sollte damit eigentlich so umgeschrieben werden können, dass der onclick-Handler nur bei eingeschaltetem JavaScript ein neues Fenster öffnet, die Seite dadurch aber für jedermann benutzbar bleibt. […]
November 25th, 2005 at 14:53
Eine weitere sinnvolle Anwendung eines Links in in einem neuen Fenster wäre z. B. wenn ein Player Musik abspielt, wärend man eine (Musik-) Site durchsurft.
Wie ein solcher Link aussieht ist ja jetzt klar.
Was aber, wenn das Fenster, etwa zum wechseln des Stücks, nach vorn geholt werden soll. Die Lösungen, die ich seit Tagen im Netz finde, laden jedesmal (bei einem neuen Seitenaufruf) den Player neu, der dann wieder mit dem Startstück anfängt und ähnlich unbrauchbares.
Wie sieht denn hier eine solide Lösung aus?