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:”Strict HTML/XHTML and target=”_blank”(Qian Qin)”:http://www.qianqin.de/2008/06/11/strict-htmlxhtml-and-target_blank/ :”Open External Links in New Window Automatically(CSS Globe)”:http://cssglobe.com/post/1281/open-external-links-in-new-window-automatically , 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

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:


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


10 responses to “Open links in new window XHTML-conform”

  1. 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…

  2. 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.

  3. 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

  4. 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;   
            }   
    	});
    });
    
  5. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *