Getting a fully qualified URL

21 Jan 2009

I’ve been experimenting with different methods of retrieving a qualified (absolute) URL from a relative one. To show you what I mean let’s assume we have an anchor with the href attribute set to ‘page.html’:

<a href="page.html">Page</a>

How do we get the fully qualified URL which this href represents (e.g. ‘http://www.whatever-domain.com/path/to/page.html‘)?

The method below works quite well in most browsers but unfortunately (and unsurprisingly) it fails in IE6:

alert( theAnchor.href );
// All 'compliant' browsers return the fully qualified URL! :D
// IE6 returns just 'page.html' :(

Of course, you could go the complicated route and do something like this, but why make something so complicated when it doesn’t need to be? I think you’ll agree that regardless of how ‘hacky’ my method is it’s a lot better than a near 40 line string/regex marathon!

My magical method:

function qualifyURL(url){
    var img = document.createElement('img');
    img.src = url; // set string url
    url = img.src; // get qualified url
    img.src = null; // no server request
    return url;
}
// Tested successfully in IE6/7, FF2/3, Safari3, Opera9, Chrome (All on Windows XP)
 
// EXAMPLE:
var myRelativeURL = 'blah/page.html';
alert( qualifyURL(myRelativeURL) );

Oddly, IE6 returns a fully qualified URL for images (src) but does not do so for anchors (href). If you look at the above function you’ll notice that the generated image’s src is set to null; this is not entirely necessary but prevents any server requests after the new image is created.

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

So far there's been 11 Responses to
“Getting a fully qualified URL”

David Walsh January 22nd, 2009 at 12:02 am

Very clever. Nice work!

Joseph McCann January 22nd, 2009 at 12:06 am

Very interesting…well done James.

Brenelz January 22nd, 2009 at 12:25 am

Wow… neat trick James!

How did you find this one out?

Thomas Milburn January 22nd, 2009 at 9:05 am

I presume James got the idea from here.

James January 22nd, 2009 at 9:21 am

Thanks all!

Yep, Thomas, you’re correct, although I made my own little modification which prevents any server requests from being made. I suppose I shouldn’t have called it “my magical method”; I guess I’m just a fan of alliteration! 😉

Thomas Milburn January 22nd, 2009 at 8:15 pm

It might not be completely your own but I like your modification and its a neat hack! Could you explain how your modification actually works. When would javascript normally make the server request. I would of thought it makes the server request when the image’s src is first set.

James January 22nd, 2009 at 10:33 pm

Technically, a server request is made but since the ‘src’ is set to null it just ends up being a request to the same page which means the overhead is non existent (I’m not totally sure about this though). It might be worth introducing a compromise:

function qualifyURL(url) {
    var a = document.createElement('a');
    a.href = url;
    if (/^http:///.test(url)) {
        // IE7, FF, Op, Sf
        return a.href;
    } else {
        // IE6
        var img = document.createElement('img');
        img.src = url;
        return img.src;
    }
}

Kyle Simpson May 7th, 2009 at 4:15 pm

I just tried this in IE7.

Results: a request is made when you set img.src, but then it looks like it’s canceled when you set src=null. So, technically, a request is fired off, but the page isn’t suffering from the waiting for the response.

However, I watched the server logs, and the server doesn’t even receive the initial request, but it does receive the request for “null”, which of course (usually) will return a 404. So that kind of defeats the purpose. Trading one request for another isn’t that helpful.

However, if you set img.src = “http://”, then it makes a dead request (no server load taken up), and should have little to no overhead in the browser processing/waiting (since this is javascript and asynch/non-blocking).

The bad part is the server does still receive the initial script url request (in the logs), but again, IE7 has already abandoned the request by that point so the browser doesn’t pay the penalty to process the response.

————-

Also, I tried the a.href stuff, and that doesn’t work when inserted by javascript, at least not in IE7. It just returns the same src you set to it. I even tried inserting the link into the body of the page, still no go.

Zach Leatherman October 16th, 2009 at 8:18 pm

Instead of
img.src = null;

This should work without making a request:
img.removeAttribute(‘src’);

I would strongly encourage you to amend the article with this information, I was seeing serious issues with corrupted server-side models because of this extra “null” request, which would resolve to something like:
https://j11y.io/javascript/null

Thanks,
Zach

Zach Leatherman October 19th, 2009 at 9:22 pm

Actually, a co-worker pointed out to me that the removeAttribute will not work properly either. I found a silver-bullet approach using innerHTML over at http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue

James October 19th, 2009 at 9:36 pm

@Kyle, thanks for the “http://” tip!

@Zach, funnily enough, that StackOverflow thread you just linked to was started by me (“J-P”)!

Getting a fully qualified URL

My magical method:

So far there's been 11 Responses to “Getting a fully qualified URL”

So far there's been 11 Responses to
“Getting a fully qualified URL”