Sie sind hier: Startseite - Tutorials - Target bei XHTML

XHTML und target=_blank in Links

Viele Webmaster stellen bei der Umstellung Ihres Codes auf XHTML oder der Neuentwicklung von Seiten in XHTML mit Erschrecken fest, daß das target Attribut bei Links nicht mehr valide ist. Insbesondere bei Frames oder wenn man externe Seiten in neuen Fenstern (target=_blank) öffnen möchte, stört es sehr, wenn man kein Target mehr setzen kann.

Aber an dieser Stelle kann man sich sehr schön mit Javascript helfen - und zwar ohne jeden Link anpassen zu müssen. Der Onload Handler von Javascript macht es möglich.

Das folgende Beispiel zeigt, wie wir auf unserer eigenen Seite externe Links in einem neuen Fenster öffnen. Wir nutzen dazu eine externe Javascript Datei, die wir in jeder Seite (Templates machen es uns einfach) im Header verlinkt haben:

<head>
	...
	<script type="text/javascript" src="/styles/targetblank.js"></script>
</head>

In dem Javascript wird dann unsere eigene Domain als Pattern festgelegt und alle Links, die nicht auf unsere Domain zeigen (also die externen Links) werden automatisch per Javascript mit dem Attribut target=_blank versehen.

Datei targetblank.js:

var ownurlpatt = /elmar-eigner.de/;  // gegen Ihre eigene URL ersetzen!

function addEvent(obj, evType, fn){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, false);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    return false;
  }
}
function getEventTarget(e){
	//by Peter Paul Koch - http://www.quirksmode.org/js/events_compinfo.html#link7
	return (e.target) ? e.target : e.srcElement
}

blankclick = function(e){
	var tg = getEventTarget(e);
	if ( tg.tagName.toLowerCase() == 'a' ) {
		tg.target ='_blank';
	} else if ( tg.parentNode.tagName.toLowerCase() == 'a' ) {
		tg.parentNode.target ='_blank';
	}
	return true;
}


onPageLoad = function(){
	var doclinks = document.getElementsByTagName("a");
	for (var i = 0; i < doclinks.length; i++) {
	//alert(doclinks[i].href);
		if ( doclinks[i].rel == 'noblank' ) {
			;
		}
		else if ( ! doclinks[i].href.match(ownurlpatt) && ! doclinks[i].href.match(/^(mailto|javascript):/) ) {
		  if ( doclinks[i].attributes['title'] ) {
		  	doclinks[i].attributes['title'].value =  "external link - new window: " + doclinks[i].attributes['title'].value;
		  }
		  addEvent(doclinks[i], "click", blankclick);
		}
	}
}
	
window.onload = onPageLoad;

Last but not Least sein noch gesagt, daß dies eine generische Lösung ist, die alle externen Links automatisch in einem neuen Fenster öffnet - ohne jeden einzelnen Link anpassen zu müssen. Dies macht so natürlich nur Sinn, wenn man viele externe Links auf den Seiten hat - vielleicht für Webkataloge oder ähnliches. Für weniger externe links gibt es auch einfachere Ansätze, zum Beispiel einfach den Onclick-Event direkt im Linktag zu definieren:

<a href="http://irgendwo.tdl" onclick="window.open(this.href,'_blank'); return false;" >Ein Link</a>

Viel Erfolg bei der XHTML Umstellung!

Seiteninformationen:
Kurzbeschreibung: Target _blank bei XHTML Links: wie kann man XHTML valide Links im neuen Fenster öffnen
Suchbegriffe: XHTML, target, _blank
Letzte Änderung: 22.03.2017 - 13:07
PageViews: 28.985
Startseite · Englische Version · Sitemap · Free Tools · Werbung · Impressum