Ob es ratsam ist externe Links in neuem Fenster / Tab zu öffnen bzw. Verweise generell in neuen Tabs / Fenstern zu öffnen ist umstritten. Grundsätzlich werden dabei zwei sinnvolle Ansätze vertreten.

  • Ansatz A

    Dem Benutzer ist es selbst überlassen wie sich Links nach anklicken verhalten. Alle Links öffnen sich im selben Fenster.

  • Ansatz B

    Dem Benutzer wird die Entscheidung abgenommen und externe Links öffnen sich in einem neuen Fenster / Tab. Hierbei wird die eigentliche Seite nicht verlassen.

Ich selbst tendiere zu Ansatz B. Sollte es, aus welchen Gründen auch immer, nicht möglich sein ein target=“_blank“ Server seitig in das HTML Dokument einzufügen verwende ich eine Javascript Funktion auf jQuery Basis.

Externe Links in neuem Fenster öffnen –extendable

Diese Methode ist insbesondere interessant wenn verschiedene Faktoren für die Prüfung eines Links erforderlich sind.

/* Nicht vergessen das jQuery Framework vor diesem Snippet einzubinden  */
jQuery(document).ready(function() {
	var getdomainname = function(url) {
		return url.split('/')[2].split(':')[0];
	}
	var targetblank = function() {	
		if (window.location.host != getdomainname(jQuery(this).attr('href')))
			jQuery(this).attr('target', '_blank');
	}
	jQuery('body a').each(targetblank);	
});

Mithilfe dieser Funktion können jederzeit auch einzelne Bereiche der Internetseite angesprochen werden. Strukturen ohne externe Links sollten auch aus Performance Gründen nicht von der Funktion überprüft werden.

Weitere Informationen zur Funktion getdomainname() findest du in meinem vorherigen Post: Javascript: Domain Name ermitteln (JS: get domain name) via URL

Externe Links in neuem Fenster öffnen – quicky

/* Nicht vergessen das jQuery Framework vor diesem Snippet einzubinden  */
jQuery(document).ready(function() {
        jQuery("a[href^='http']:not([href^='"+window.location.host+"'])").attr('target', '_blank');
});

Diese Methode fügt allen a Tags mit einem http:// am Anfang des href Attributes das nicht der aktuellen Domain entspricht das target=“_blank“ hinzu. Nicht zu vergessen ist, das auch hier mit Hilfe des Selektors aus einzelne Bereiche des HTML Dokuments angesprochen werden können. Dieser Vorgehensweise fehlt es leider an Erweiterbarkeit. Insbesondere für Filter Regeln zur die Auswahl der Links.

5 Kommentare »