XHTML und target=_blank in Links

Einen Kommentar schreiben

Wie im Html Grundkurs erwähnt fordert Xhtml die strikte Einhaltung des Xhtml Standards. Dazu gehört auch die Abschaffung der Frames und damit des Attributs : (target=_blank). Doch was machen, wenn man nun doch eine Seite Xhtml Konform gestalten, aber Links trotzdem in einem neuen Browser Fenster(Tab) öffnen möchte?

Wir greifen zu ein wenig Javascript! Der Onload Handler von Javascript macht es möglich.

Der folgende Code zeigt, wie man auch Xhtml Strikt externe Links in einem neuen Fenster(Tab) öffnen kann. Dazu benötigen wir eine externe Javascript Datei, die wir in den Headbereich einer jeder Seite einbinden oder man nutzt Templates, dann reicht es nur in der ausführenden Datei.

Einbinden in den Headbereich:


<head>


...


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


</head>

Nun einfach die eigene Domain als Pattern(Muster) festlegen. Alle anderen Links die nun nicht auf die festgelegte Domain verweisen, bekommen automatisch das Attribut target=_blank.

Die Javascript Datei targetblank.js:


var ownurlpatt = /pixelmania\.at/;  // 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;

Wie man gut sieht, ist das eine Lösung die alle externen Links automatisiert in einem neuem Browser Fenster(Tab) öffnet. Diese Lösung ist wirklich sehr hilfreich wenn man große Projekte wie einen Link Katalog Xhtm Konform gestalten möchte.
Hat man nur wenige externe Links und möchte weiterhin mehr Einfluss auf externe Links haben, kann man natürlich auch einzelne Links anpassen. Dazu definiert man einfach nur in einzelnen Link Tag´s den Onclick-Event.

Lösung für einzelne Links:


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

Viel Erfolg bei der XHTML Umstellung!

Script von Elmar Eigner

rainer am 27.7.2007 | 19:56


wenn mal mehr artikel da sind, mach ich einen menü punkt der sich artikel nennt.

nur eine übersichts seite mit derzeit drei punkten sieht leider ein wenig leer aus :D

lg rainer / pixelmania.at

Martin am 27.7.2007 | 11:15


Was machsten du wenn du 10 Artikel hast? Das Menü oben links sieht ziemlich doof aus! Erst kommt "Homepage Vorlagen" und "Bannergenerator" und so, und dann "Xhtml target blank" ... passt nicht so ganz ... 

naja nurn tip

Marcus am 17.6.2007 | 12:17


ja, sehr hilfreich

GerdB am 16.6.2007 | 13:35


nicht unbedingt NEU ... aber brauchbar !

Hier kannst Du Deinen Kommentar zu diesem Artikel schreiben.