Deutsch English
Internet, Programmierung Read this post in English

Links XHTML-konform in neuem Fenster öffnen

Picard oder Kirk?

Als ich mein Blog (endlich) auf XHTML umstellen wollte, hatte ich ja wie bereits erwähnt, erst mit der Transitional-Variante angefangen. Das hatte eigentlich nur einen einzigen Grund: Bei XHTML Strict ist in Links kein target-Attribut erlaubt. Ich will mich auch überhaupt nicht auf irgendwelche Diskussionen darüber einlassen, ob man als Webmaster den User bevormunden darf, indem man das Öffnen neuer Fenster erzwingt oder nicht. Dazu gibt es im Web Hunderte, Tausende und Millionen von Meinungen, Threads und Posts, die mich allesamt nicht interessieren. Am Ende bleibt es ja doch eine Frage des Geschmacks – so wie Apple oder PC, Windows oder Unix, Porsche oder Ferrari, Kaffee oder Tee, Picard oder Kirk.

Ich persönlich mag es überhaupt nicht, wenn ich auf einen externen Link klicke und dieser sich nicht in einem neuen Fenster/Tab öffnet, sodaß ich – je nachdem, wie lange ich noch auf der neuen Seite herumklicke – zigmal den „Zurück“-Button betätigen muß, um wieder zur Ursprungsseite zurück zu gelangen.
Dennoch entschied ich mich schließlich doch für XHTML Strict. Um trotzdem die target-Funktionalität beibehalten zu können, habe ich ein JavaScript geschrieben, das ich aus zwei anderen, die ich im Netz fand[1] [2] , die mir aber beide nicht hundertprozentig zusagten, zusammengebastelt habe.

Dies ist das Ergebnis:

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("rel") == "external") anchor.target = "_blank";
	}
}
 
this.addEvent = function(obj, type, fn) {
	if(obj.attachEvent) {
		obj['e'+type+fn] = fn;
		obj[type+fn] = function() { obj['e'+type+fn](window.event ); }
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type, fn, false);
	};
};
addEvent(window, "load", externalLinks);

Dieses Script kann man nun einfach in einer Textdatei speichern und diese z. B. externalLinks.js nennen. Dann bindet man sie nach folgendem Muster in den head-Bereich seiner Seite ein:

<script type="text/javascript" src="http://www.domain.com/js/externalLinks.js"></script>

Von jetzt an verwendet man in seinen Links nicht mehr target="_blank", sondern rel="external". Alle auf diese Weise ausgezeichneten Links werden nun automatisch von unserem JavaScript in einem neuen Fenster geöffnet. (Für Benutzer mit deaktiviertem JavaScript verhalten sie sich einfach wie ganz normale Links und öffnen sich im selben Fenster.)



Kommentare

  1. 22. April 2010
    13:48 Uhr

    Ginchen flag

    Jaaa… Also, ob ich nun „ex“ oder „external“ schreibe – ich bevorzuge eigentlich immer extrem sprechende Bezeichner, von daher wählte ich „external“. Soviel Zeit muß sein. :)

    Und Dein JS ist gut und schön – wenn man ein Framework wie Prototype benutzt. Vielleicht benutzt man ja aber ein anderes – oder gar keins? ;) Sowas soll es tatsächlich noch geben (bei mir beispielsweise). :)

    Trotzdem danke für Deinen Hinweis, ist natürlich eine nette Abkürzung.

  2. 19. April 2010
    4:47 Uhr

    tim kretschmer flag

    das geht auch knapper. sowohl im JS als auch im markup

    document.observe("dom:loaded", function() {
    	$$('a[rel=ex]').each(function(e){
      		e.onclick = function(){
            	window.open(this.href);
    		return false;   
            }   
    	});
    });
  3. 8. April 2009
    4:18 Uhr

    Rosie flag

    Boah – Verräter!
    das ja mal ein hartes Stück Brot *knabber* ;)

  4. 3. April 2009
    6:00 Uhr

    Ginchen flag

    Sisco! Du Verräter! :D

  5. 3. April 2009
    4:51 Uhr

    Rosie flag

    neues Fenster und alte Rechtschreibung, Windoof/Linux/Unix, Audi 80, Milchkaffee und Sisco.
    Aber wie dem auch sei mit den Geschmäckern – tausend Dank für das Script, denn lieber zig Fenster als x-mal zurück-zurück-zurück…
    Grüßles – Rosie

  6. 26. Januar 2009
    16:24 Uhr

    Ginchen flag

    There is one aspect about Kirk that you don’t take heed of as a man.
    Try to read it from these ladies‘ faces:
    Kirk's women

  7. 22. Januar 2009
    8:00 Uhr

    Nicholas Winder flag

    Roger Moore, Side, two pillows, desktop!

    How can you not chose between Picard and Kirk? I mean come on! Kirk was awesome, he defined what a captian should be. But Picard was just … perfect.

    I love him, a little.

  8. 31. Dezember 2008
    18:25 Uhr

    Ginchen flag

    PC, Windows, Porsche (although I don’t care very much about cars in general).
    There is absolutely no way to make me decide between coffee and tea, and the same goes for Picard and Kirk!

    The rest is quite easy: Sean Connery, on back, two pillows, desktop.
    (Reads quite funny if you take it out of its context.)
    I guess I would like a laptop though, if I owned one…

  9. 28. Dezember 2008
    11:38 Uhr

    Nicholas Winder flag

    Sean Connery or Roger More? Sleeping on side or back? Using one pillow or two? Using a desktop or laptop?

  10. 28. Dezember 2008
    11:30 Uhr

    Nicholas Winder flag

    PC, Windows, Porsche, Tea, Picard.

    And you?

Kommentieren

Erlaubtes HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong> <img src="" alt="" class="" width="" height=""> | Codeschnipsel können in `backticks` gepostet werden. Beispiel: `<?php echo "Hi!"; ?>`