Sprung zum Inhalt [S] Tastaturkürzel / Accesskeys [0]
webdesign weisshart Startseite

Webdesign nach Maß von webdesign weisshart

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

Die Geister scheiden sich daran, wie denn nun ein Link am besten geöffnet werden soll. Die einen schätzen ein neues Fenster, um die alte Ansicht nicht zu verlieren. Andere hassen das Fenstergewirr.
Ich überlasse die Wahl meinem Besucher!
In der Standardeinstellung werden Links im gleichen Fenster geöffnet.
Vorteil: die Zurücktaste funktioniert wie gewohnt.
Und wer Links in einem neuen Fenster ö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 ö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:

und ist auf diesen Seiten 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.

Das "Gedächtnis" funktioniert so lange, bis der Browser geschlossen wird. Session Cookie ist der Fachausdruck dafür.

function linkcookie() {
  if(document.cookie.indexOf('externoeffnen') !== -1){
      document.cookie = 'extern=0;path=/;expires=Thu, 01-Jan-70 00:00:01 GMT';
  } else {
      document.cookie='extern=externoeffnen; path =/';
  }
}

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.


Kommentar schreiben

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

Einen Kommentar zu diesem Artikel schreiben:

Über Ihren Kommentar oder Ihre Frage zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Einträge wider die guten Sitten, unsinnige Einträge, oder Spam kommentarlos zu entfernen.

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

[a]example.org[/a] um eine URL zu verlinken bzw.
[a]example.org Beschreibung der verlinkten Seite[/a]
[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat

Tastaturkürzel

zum Seitenanfang