Deutsch English
Internet, Programming Diesen Artikel auf Deutsch lesen

Open links in new window XHTML-conform

Picard or Kirk?

When I wanted to convert my blog to XHTML (finally), I first started with the Transitional version. There was really only one reason for that: in XHTML Strict, the target attribute is not allowed. I don’t want to get involved in any discussions about whether or not a webmaster may infantilize the user by forcing new windows to open. There are hundreds, thousands and millions of opinions, threads and posts on the web about that, all of which I don’t care about. In the end, it remains a matter of taste – just like Apple or PC, Windows or Unix, Porsche or Ferrari, coffee or tea, Picard or Kirk.

Personally, I don’t like it at all when I click on an external link and it doesn’t open in a new window/tab, so that – depending on how long I click around on the new site – I have to hit the “Back” button umpteen times in order to get back to the original site.
Nevertheless, I decided for XHTML Strict after all. In order to still keep the target functionality I wrote a JavaScript which I pieced together from two others that I found on the net[1] [2] , but that didn’t suit me a hundred percent.

This is the result:

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);

You can simply save this script in a text file and for example call it externalLinks.js. Then you implement it in the head area of your page according to this sample:

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

From now on, you don’t use target="_blank" in your links anymore, but rel="external". All links marked like that will now automatically be opened in a new window by our JavaScript. (For users with JavaScript disabled, they will simply behave like ordinary links and open in the same window.)



Comments

  1. 22nd April 2010
    1:48 pm

    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. 19th April 2010
    4:47 am

    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. 8th April 2009
    4:18 am

    Rosie flag

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

  4. 3rd April 2009
    6:00 am

    Ginchen flag

    Sisco! Du Verräter! :D

  5. 3rd April 2009
    4:51 am

    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. 26th January 2009
    4:24 pm

    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. 22nd January 2009
    8:00 am

    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. 31st December 2008
    6:25 pm

    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. 28th December 2008
    11:38 am

    Nicholas Winder flag

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

  10. 28th December 2008
    11:30 am

    Nicholas Winder flag

    PC, Windows, Porsche, Tea, Picard.

    And you?

Write comment

Allowed 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=""> | Code snippets can be posted in `backticks`. Example: `<?php echo "Hi!"; ?>`