Externe Links in einem Neuen Fenster öffnen

Vorwort

Da HTML 4.01 oder XHTML 1.0 Strict im Element A das Attribut target="" nicht gestattet, weichen wir auf eine Methode mit Javascript aus um Links in einem neuen Fenster zu öffnen. Wir erstellen eine externe Datei default.js und binden diese dann im Dokument ein um den gewünschten Effekt zu erreichen.

Der Vorteil an dieser Methode ist, dass der Quelltext valide bleibt und das gewünschte Verhalten, vorausgesetzt der Besucher surft mit eingeschaltenem Javascript, denoch erfolgt.

Der Nachteil dieser Methode bezieht sich nicht auf die Methode selbst, sondern viel mehr auf die Tatsache das Links mit target="_blank" Besucher irritieren können.
Ein Besucher sollte selbst entscheiden können wo und wie er Links öffnet.

Javascript externalLinks() Funktion

Javascript Funktion die der gewünschten CSS class das Attribut target="_blank" hinzufügt.

Javascript default.js

/* 
 * Externe Javascript-Datei die alle A-Elemente
 * mit der class="extern" das Verhalten
 * eines Attribut target="_blank"
 * hinzufügt.
 */
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";
 }
}
window.onload = function()
 {
  externalLinks();
 }

Externe Javascript Datei einbinden

Die Javascript Datei wird mit script im Kopfbereich des HTML Templates eingebunden.

HTML-Datei mit extern eingebundenem Javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Default</title>
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script src="/js/default.js" type="text/javascript"></script>
 <!-- Javascript-Datei im Head-Bereich einbinden. -->
</head>
<body>
 <ul>
  <li><a class="extern" href="http://gedit.net/ title="Externer Link">Externer Link</a></li>
  <!-- Beispiel eines externen Links. -->
  <li><a href="#" title="Interner Link">Interner Link</a>
  <!-- Beispiel eines internen Links. -->
 </ul>
</body>
</html>

Wie im oberen Quelltext zu sehen, erhalten Links die in einem neuen Fenster geöffnet werden sollen die class extern. Hier ein Beispiel für einen Link der sich in einem Neuen Fenster öffnet.