Links in neuen Fenstern öffnen
Nach obenHintergrund
In HTML, XHTML 1.0 Frameset und Transitional kann man target="_blank" verwenden um Links in neuen Fenstern zu öffnen. In XHTML 1.0 Strict und ab XHTML 1.1 ist dies nicht erlaubt bzw. nicht valid. Dennoch ist es möglich per JS und in Zukunft auch per CSS Links in neuen Fenstern zu öffnen.
Lösung
Es gibt mehrere Lösungswege bzw. JS Funktionen um Links in neuen Fenstern zu öffnen. Die Lösung die ich vorstellen werde, verwendet im XHTML das rel Tag.
XHTML
rel ist eine durch Leerschläge voneinander getrennte Liste, die die Verbindung der Quellseite zur Zielseite eines Links beschreibt. Da es sich um eine externe Seite handelt, die in einem neuen Fenster geöffnet werden soll, verwenden wir den Attributwert "external".
<a href="http://www.google.com/" rel="external">Google</a>
JavaScript
Die JS Funktion wird beim kompletten laden der Seite alle Links aufsuchen. Diese werden überprüft, ob sie ein rel Attribut haben und ob dieses den Wert "external" beinhaltet. Falls dies der Fall ist, wird festgelegt, dass ein neues Fenster beim anklicken oder beim Tastendruck geöffnet wird.
window.onload = externalLinks;
function externalLinks() {
if(!document.getElementsByTagName) return;
var links,a,i;
links = document.getElementsByTagName("a");
for(i=0;i<links.length;i++) {
a = links[i];
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("external") > -1) {
a.onclick = function() {
window.open(this.href);
return false;
}
}
}
}
Nach obenCSS3
In Zukunft wird dies auch ohne JS möglich sein. In CSS3 wird es nämlich möglich sein zu bestimmen, ob sich die Links in einem neuen Tab bzw. Fenster öffnen sollen. Das rel Attribut wird dafür wieder nützlich sein, nämlich als Selektor. Falls ein Link im rel den Wert "external" beinhaltet, wird der Link in einem neuen Tab geöffnet.
a[rel~="external"] {
target-new: tab;
}
Näheres zum CSS3 Hyperlink Presentation Module.
julian
Ich finde man kanns uebertreiben, warum kein target mehr...
pberndt
Weil die Idee ist, Verhalten und Inhalt klar zu trennen. Und was würde dieses Konzept nutzen, wenn man hier eine Ausnahme machen würde? :)
hime
Und nicht nur die Idee! Einfach mal nicht immer nur die visuellen Browser vor Augen haben, Julian, dann wird das Prinzip klar:
Was ist z.B. mit dem Handy, das kein zweites Fenster öffnen kann?
Getrennt vom Inhalt kann ein Verhalten dezidiert beschrieben werden, z.B. für ein entsprechendes Endgerät. Dann übernimmt gegebenenfalls ein CSS für Palm/Handhelds die geeignete Darstellung.
Goliath
Mir fehlt irgendwie die einfachste Lösung:
<a href="foo.html" onclick="window.open(this.href); return false;">bar</a>