Tipps & Tricks
Hilfestellungen rund um die Themen Internet & Programmierung
XHTML: Externe Links in neuen Fenstern öffnen – ohne Target-Attribut
Sie haben Ihre Webseite nach allen Regeln der Kunst barrierefrei aufgebaut, verwenden den "Strict"-Doctype nach XHTML 1.0 oder 1.1 und versuchen nun, Ihr Dokument zu validieren. Dabei erhalten Sie evtl. eine ähnliche Meldung wie die Folgende:
Line 36, column 57: there is no attribute "target"
...icklung.com" target="_blank">hier der Linktext</a>.
Woran liegt's? Ganz einfach: Wahrscheinlich haben Sie einen "ganz normalen" Link wie folgt an der bemäkelten Stelle im Dokument:
<a href="http://www.tm-webentwicklung.com" target="blank">hier der Linktext</a>.
Das "Target"-Attribut ist jedoch bei "stricten" Doctypes verboten, weil weder mit Frames noch mit mehreren Fenstern gearbeitet werden kann (was damit zu tun hat, dass – einfach ausgedrückt – barrierefreie Webseiten medienübergreifend darstellbar sein sollen und Frames und neue Fenster weitgehend auf Computer-Browser beschränkte Techniken sind).
Es gibt verschiedene Lösungsansätze, wie man trotzdem externe Links in neuen Browser-Fenstern öffnen kann – damit das Dokument validiert, darf natürlich das Target-Attribut dabei nicht verwendet werden. Ich verwende hier eine Lösung aus HTML und JavaScript, die sich für mich bewährt hat, weil sie a) in allen gängigen Browsern funktioniert und b) völlig risikofrei ist, da sie bei Ausgabegeräten, die kein JavaScript unterstützen, keinen Nachteil bringt.
Dazu bediene ich mich eines HTML-Attributes, das bisher eher ein Schattendasein führt: Jeder Link, der in einem neuen Fenster geöffnet werden soll, erhält das Attribut rel="external". Das sieht dann z.B. so aus:
<a href="http://www.tm-webentwicklung.com" rel="external">hier der Linktext</a>.
Schließlich muss noch ein JavaScript her, das allen Links, die unser Attribut enthalten, ein Target zuweist:
<script type="text/javascript">
function setExternalLinks() {
if (!document.getElementsByTagName) {
return null;
}
var anchors = document.getElementsByTagName("a");
for (var i=0;i < anchors.length;i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
anchor.setAttribute("target", "blank");
}
}
}
window.onload = setExternalLinks;
</script>
Nun werden alle gekennzeichneten Links in neuen Fenstern geöffnet, nicht gekennzeichnete Links öffnen sich nach wie vor im selben Fenster, aus dem sie aufgerufen werden. Hier eine Live-Demo: www.spiegel.de.
Mit Dank an wadny.com