Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Links zu fremden Seiten in neuem Fenster Tab öffnen – mit Gedächtnis

Nachtrag 20.04.2023

Als der Artikel entstand (2009), nutzte tatsächlich noch kaum jemand Tabs. Mehrere Fenster waren damals üblich. Aber die beschriebene Technik arbeitet natürlich immer schon unverändert auch mit Tabs.

Die Geister scheiden sich daran, wie denn nun ein Link am besten geöffnet werden soll. Die einen schätzen ein neues Fenster / einen neuen Tab, um die alte Ansicht nicht zu verlieren. Andere hassen das Fenster- / Tab-Gewirr.
Ich überlasse die Wahl meinem Besucher!
In der Standardeinstellung werden Links im gleichen Fenster / Tab geöffnet.
Vorteil: die Zurücktaste funktioniert wie gewohnt.
Und wer Links in einem neuen Fenster / Tab öffnen will, kann das jederzeit. Zum Beispiel so: Klick mit der rechten Maustaste, und dann die entsprechende Auswahl treffen (z.B.: "Link in neuem Fenster / Tab öffnen").

Aber nicht jeder Surfer ist so versiert und weiß das.

Die JavaScript Lösung

Bei Dr. Web hab' ich mir eine pfiffige Lösung abgeguckt. Eine Checkbox, mittels der ein Besucher seine Präferenz einstellen kann. Das sieht so aus:

Screenshot des Hinweises mit Checkbox

und ist auf dieser Seite gleich nach dem Suchfeld zu finden. Probieren Sie es doch gleich mal aus.

1. Der Code für die Checkbox:

<form action=""> <input onclick="linkopener(this.checked)" id="linksnewwin" type="checkbox"> <label for="linksnewwin">Fremde Seiten in neuem Fenster öffnen?</label> </form>

2. Die JavaScript Funktion

Hinweis: Wenn Sie das Script einsetzen wollen, müssen Sie "weisshart.de" durch den Namen Ihrer Domain ersetzen.

function linkopener(a) { var b=a?"_blank":"_self"; var c=document.links; for(var i=0;i<c.length;i++) { if(c[i].href.search("weisshart.de")==-1) {c[i].target=b;} } }

Damit ist eigentlich schon alles erledigt.

Nun wäre es aber schön, wenn die einmal getroffene Wahl auf allen Seiten eines Webauftritts erhalten bliebe.

3. Ein Keks gegen das Vergessen

Die folgende Funktion sorgt für das Gedächtnis, und setzt bzw. löscht ein cookie, wenn wir den Haken in der Checkbox setzen / löschen.

function linkcookie() { if(document.cookie.indexOf('externoeffnen') !== -1){ document.cookie = 'extern=0;path=/; expires=Thu, 31 Dec 2099 23:59:59 UTC'; } else { document.cookie='extern=externoeffnen; path =/; expires=Thu, 31 Dec 2099 23:59:59 UTC'; } }

Der Aufruf dieser Funktion wird nun per JavaScript ins Dokument geschrieben.

Warum per JavaScript? Nun, sollte Javascript nicht verfügbar sein, dann klappt der ganze Trick natürlich nicht. Aber in diesem Fall wird die Checkbox auch gar nicht erst angezeigt, und jegliche Verunsicherung vermieden – Progressive Enhancement. Probieren Sie's aus. Schalten Sie JavaScript aus.

4. Ins Markup kommt also dieses inline-JavaScript

<script type="text/javascript"> /* <![CDATA[ */ if(document.cookie.indexOf('externoeffnen') !== -1){ addEvent(window, 'load', linkopener); document.write ('<form action=""><p class="linkopener"><input type="checkbox" checked="checked" onchange="linkcookie()" onclick="linkopener(this.checked)" id="linksnewwin" /> <label for="linksnewwin">Fremde Seiten in neuem Fenster öffnen?<\/label><\/p><\/form>'); } else { document.write ('<form action=""><p class="linkopener"><input type="checkbox" onchange="linkcookie()" onclick="linkopener(this.checked)" id="linksnewwin" /> <label for="linksnewwin">Fremde Seiten in neuem Fenster öffnen?<\/label><\/p><\/form>'); } /* ]]> */ </script>

Eine Kleinigkeit fehlt noch:
Beim Wechsel auf eine andere Seite muss "onload" die Funktion linkopener aufgerufen werden, um zu prüfen, ob das cookie gesetzt ist.
Wie man eine Funktion onload richtig aufruft, steht bei ichwill.net Also müssen wir unserem JavaScript noch diese Funktion hinzufügen:

5. AddEvent

function addEvent(obj, evType, fn){ if (obj.addEventListener){ obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; } }

Fertig.

Nachtrag 24.08.2012 — Ein kleiner Beitrag zur Usability / Barrierefreiheit:

Im Tooltip, der beim Überfahren eines Links mit der Maus erscheint, steht bei externen Links "externer Link: URL". Dieser Hinweis wird auch von Screen Readern vorgelesen (falls sie so eingestellt sind, dass das title-Attribut gelesen wird).
Wenn, wie im Artikel beschrieben, die externen Links in einem neuen Fenster / Tab geöffnet werden, sollte das im Tooltip erkennbar sein.

Screenshot
Der Tooltip beim Überfahren eines externen Links mit der Maus.
Hier steht jetzt in diesem Fall: "öffnet in neuem Fenster - externer Link: URL"

Möglich macht das eine zusätzliche Zeile JavaScript-Code:

function linkopener(a) { var b=a?"_blank":"_self"; var c=document.links; for(var i=0;i<c.length;i++) { if(c[i].href.search("weisshart.de")==-1) {c[i].target=b;} c[i].title = "\u00f6ffnet in neuem Fenster - " + c[i].title; } }

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

17 Kommentare

  1. Dieter schrieb am Mittwoch, 23.09.09 16:23 Uhr:

    Herzlichen Dank für die Erweiterung des Skripts. Copy & Paste hat bei mir funktioniert. :-)

    Ich kann leider nicht programmieren. Daher mal die Frage eines Laien:
    Die JavaScript-Funktion ist gegenüber dem ursprünglichen Code bei Dr. Web ergänzt (0.php). Es scheint aber auch mit der JavaScript von Dr. Web mit dem Cookie zu funktionieren. Was ist denn der Grund für diese Ergänzung?

  2. Fritz schrieb am Mittwoch, 23.09.09 16:52 Uhr:

    Hallo Dieter,

    Da hat copy & paste bei mir zugeschlagen :-(
    Die Sache mit 0.php ist eine alte Eigenheit auf meiner Site, und inzwischen nicht mehr nötig. Ich hab's rausgenommen.
    Danke für den Hinweis.

  3. Fritz schrieb am Montag, 28.09.09 00:32 Uhr:

    Der Internet Explorer (alle Versionen bis einschließlich 8!) ist wirklich ein Quell ständiger Überraschungen.
    expires=Thu, 01 Jan 70 00:00:01 war dem IE nicht weit genug in der Vergangenheit, um das cookie zu löschen. Nein, es muss lauten:
    expires=Fri, 02 Jan 1970 00:00:00 UTC

    Nein, ich muss nicht verstehen, wie der IE tickt. Dennoch hab' ich natürlich die Anleitung hier angepasst.

  4. Dieter schrieb am Montag, 19.10.09 00:22 Uhr:

    Hallo Fritz,

    Cookie löschen scheint auf Deiner und meiner Seite auch mit anderen Browsern wie dem Firefox noch nicht richtig zu funktionieren. Nach Entfernen des Hakens und einem Reload der Seite ist der Haken wieder da. Außerdem auch, wenn man den Browser wieder neu startet. Hast Du eine Idee woran das liegt und wie man das Ändern kann?

    Beste Grüße
    Dieter

  5. Fritz schrieb am Dienstag, 20.10.09 17:24 Uhr:

    Hallo Dieter

    Ich musste nochmal nachbessern. Die function linkcookie() hat sich geändert. Genauer dort die Zeile 3: document.cookie = 'extern=0;path=/;expires=Thu, 01-Jan-70 00:00:01 GMT';
    Danke für den Bug.

  6. Dieter schrieb am Samstag, 24.10.09 09:05 Uhr:

    Hallo Fritz,
    bei mir ist der Bug nun auch behoben.
    Ich habe hier übrigens lediglich auf den Bug hingewiesen. Gefunden hat ihn toscho.
    Beste Grüße und herzlichen Dank für den Fix
    Dieter

  7. Annette schrieb am Donnerstag, 18.02.10 21:10 Uhr:

    Hallo,
    ich bin grad auf der Suche nach genau so einem Helferlein, allerdings nicht für echte URL-Links (also href="http://www.irgendwas.de") sondern für JavaScript-Funktionen-Links wie z.B. href="javascript:setEditMode('TRUE');pCa llbackObj.doCallback(irgenwas);"

    Dazu zwei Fragen: Funktioniert die intelligente Checkbox auch mit JavaScript-Links?
    Und wenn ja, kann man sich die Checkbox auch client-seitig einbauen, um sie beim Besuch "fremder" Webseiten zu benutzen?

    Danke, Annette

  8. Fritz schrieb am Donnerstag, 18.02.10 22:37 Uhr:

    1. Mit der hier gezeigten Funktion geht das ganz bestimmt nicht. Diese Funktion setzt (Hyper-)Links voraus. Ob sich so etwas auch für sog. JavaScript-Links realisieren lässt? Ich bezweifle es.

    2. Die Funktion "ergänze alle Links auf externe Seiten mit target=_blank" ließe sich sicher auch in einem Bookmarklet realisieren. Einer Checkbox bedarf es dann m. E. nicht.

  9. Philipp schrieb am Dienstag, 13.04.10 14:38 Uhr:

    Danke!!!
    Danach hab ich grad über ne Stunde gesucht.

    You made my day!!

  10. Tobi schrieb am Samstag, 28.01.12 00:09 Uhr:

    Klasse Script, danke dafür! Setze es in meinem Blog http://topfree.de ein.

    Kann man den Cookie auch dauerhaft setzen? Sprich, dass die Einstellung beim Schließen und späterem Öffnen des Browsers bestehen bleibt?

  11. Fritz schrieb am Samstag, 28.01.12 00:54 Uhr:

    @Tobi,

    klar geht das. Du setzt einfach expires weit genug in die Zukunft. Du musst halt darauf achten, dass der Wochentag zum gewählten Datum passt.
    Ein Beispiel zum Kopieren:
    expires=Thu, 01-Jan-15 00:00:01 GMT
    (weil der 1. Januar 2015 wieder auf einen Donnerstag = Thu fällt)

  12. Tobi schrieb am Samstag, 28.01.12 22:38 Uhr:

    Vielen Dank. Um den Cookie dauerhaft bei aktiviertem Häckchen zu setzen, muss man allerdings auch bei externoeffnen die expires-Zeile einfügen.

  13. Tobi schrieb am Sonntag, 29.01.12 00:46 Uhr:

    ...ich blicke gerade zudem durch das Phänomen nicht durch, dass sich manche Links (siehe Blog-URL oben zum Testen, z.B. aktuell den "zdf_neo" oder "Wilsberg" Textlink), nach dem Neuladen (Durchklicken der Seiten), trotz Haken zunächst im selben Fenster öffnen!? Erst beim "2. Klick", wird die Seite dann im neuen Fenster geöffnet.

  14. Tobi schrieb am Sonntag, 29.01.12 13:56 Uhr:

    Problem gelöst: Die Seite wurde gestern Nacht anscheinend nicht immer komplett zu Ende geladen.

  15. Tom schrieb am Donnerstag, 29.03.12 11:48 Uhr:

    Hallo, bei den neueren Browser-Versionen gibt es bei der Anzeige der Links die Optionen "Links in neuem Tab öffnen" und "Link in neuem Fenster öffnen". Gibt es eine Möglichkeit, das per HTML/JS oder ähnlichem zu steuern?
    Danke
    Tom

  16. Fritz schrieb am Donnerstag, 29.03.12 16:22 Uhr:

    Hallo Tom,

    kann ich mir nicht vorstellen. Und wäre auch der falsche Weg.
    Mein »Fenster-Script« ist ja gerade aus dem Wunsch entstanden, die Hoheit über den Browser dem User zu überlassen.

  17. Tim schrieb am Samstag, 26.05.12 21:20 Uhr:

    Schönes Script und danke, dass du es für alle zugänglich machst!

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat