Ursprünglich war dieses Attribut dazu gedacht in Framesets den Zielframe festzulegen. Darüber hinaus wurde es auch „missbraucht“ um Links in einem neuen Fenster öffnen zu lassen (target=“_blank“). Letzteres bot eine recht elegante Möglichkeit, welche verhinderte das externe Links im selben Fenster geladen wurde, wie die eigene Seite. Mit dem Wegfall des target-Attributes ist diese Möglichkeit nun nicht mehr gegeben.

Um nun dennoch Seiten in einem neuen Fenster laden zu lassen, greift man zu einem kleinen Trick aus CSS und JavaScript.

Zu erst das CSS:

1
2
3
.extern:before {
  content: "\2197\00A0";
}

Hier wird die CSS-Klasse „extern“ definiert.
Hyperlinks, welche nun in einer neuen Seite geöffnet werden sollen, erhalten nun diese Klasse.

Dadurch werden diese Links gekennzeichnet mit einen schicken Pfeil (↗) davor.

Als Zweites das JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function externalLinks() {
  if (!document.getElementsByTagName) {
  return;
  }

  var anchors = document.getElementsByTagName("a");

  for (var i=0; i<anchors .length; i++) {
    var anchor = anchors[i];

    if (anchor.getAttribute("href") &&
      anchor.getAttribute("class") == "extern") {
      anchor.target = "_blank";
    }
  }
}

Das geübte Auge sieht hier recht schnell, das CSS und JavaScript aufeinander aufbauen. Die Klasse, welche vorher im CSS definiert wurde, wird hier im JavaScript angesprochen.

Das Script muss da noch in die Webseite eingebunden und im body-Tag gestartet werden.

1
2
3
4
5
<script type="text/javascript" src="externalLinks.js">
<body onload="externalLinks();">
  ...
  ...
</body>

Ein Link, welcher dann als „extern“ markiert werden soll, wird nun wie folgt definiert.

1
<a class="extern" href="http://example.com" title="example.com wird in neuem Fenster geöffnet">Example.com</a>

Hinweis:
Dies funktioniert nur, wenn beim Besucher auch JavaScript aktiviert und erlaubt ist. Sollte dies nicht der Fall sein, so wird der Link nicht in einer neuen Seite geöffnet, sondern in der Bestehenden. Der Pfeil jedoch weist den Besucher darauf hin, das es sich hier um einen externen Link handelt. So hat der Besucher dennoch die Möglichkeit den Link in einer neuen Seite öffnen zu lassen.

Artikel / Seite weiterempfehlen

2 Meinungen zu “target=“_blank“ und XHTML 1.0 strict / XHTML 1.1

  1. Das ist auf jeden Fall auch eine schöne Lösung, ich habe bisher einfach drauf gepfiffen und die Links einfach mit target=“_blank“ eingebaut. Das im Validating dann ein Fehler zu finden wahr hat mich nicht weiter gestört.

  2. Oh es gibt da noch weitere Ansätze um dies zu bewerkstelligen.

    jQuery:

    1
    2
    3
    4
    5
    6
    7
    8
    <script type="text/javascript">
    //< ![CDATA[
    $('a.external').bind('click', function() {
        window.open(this.href);
        return false;
    });
    //]]>
    </script>

    Der Link sieht dann so aus:

    1
    <a href="http://domain.de/" class="external">Link im neuen Tab</a>

    Oder CSS 3
    (wird leider noch nicht wirklich unterstützt, soll aber so kommen)

    1
    a.external {target:new tab behind;}

    Der Link sieht im HTML genau so aus wie bei der Lösung mittels jQuery.

    Oder im Tag selbst

    1
    <a href="http://www.domain.de/" onclick="window.open(this.href);return false;">Link</a>

    Letzteres ist wohl die sauberste Lösung derer die momentan funktionieren, da hier nicht einfach mittels JavaScript der W3C-Validiator umgangen und das target-Attribut ein geschmuggelt wird.

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>