window.location.href vs clicking on an Anchor

Question

What's the difference between clicking on:

<a href />

vs.

calling window.location.href = ...

?

Attitudinarian

Answer 1

Wherever possible, you should use <a href="foo.html"> over window.location.href, for a number of very good reasons.

1. If you have javascript disabled, none of the links would work.
2. Spiders, such as Google Bot, do not interpret javascript, and so they won't follow any of your links.
3. IT BREAKS THE INTERNET. No, really though - the World Wide Web is built on the very basis of discoverable linkages between pages. Hiding these linkages with non-standard .. err, links, goes against that very premise.
4. It makes for a bad user experience: a user expects that when they mouse over a link, they will have access to some information:
   • the destination displayed in the status bar (very important!)
   • right-click -> copy link location
   • middle-click -> open new tab
   • etc
   • Using window.location breaks all of these
5. It's much easier!

Gabbey

Great answer. I would also add Shift+Click to open in new window and Ctrl+Click to open in new tab. – Adze

I would also add accessibility in that list, I do not think JavaScript redirections can ever be guessed by screen readers for instance, when HTML anchors with the proper attributes would be – Lonergan

Answer 2

Setting window.location.href = 'thepage.html' is the same as calling:

window.open('thepage.html', '_self');

I.e. the target is limited to the same window, as that is where the location property is. This has the same effect as clicking a link without a target attribute:

<a href="thepage.html">...</a>

You can use the open method instead to specify a different target, like a new window:

window.open('thepage.html', '_blank');

This has the same effect as clicking a link with that target:

<a href="thepage.html" target="_blank">...</a>

You can also use the open method to open a new window. The return value is a reference to the window, so you can use that to set the location of that window instead of the current window:

var w = window.open('about:blank', '_blank');
w.location.href = 'thepage.html';

Entwine

Answer 3

Don't forget that in addition to the above answers, clicking on a hyperlink (anchor tag) will trigger that element's onclick handler (if any), whereas the Javascript version clearly doesn't and just changes the window's location.

It is possible to manually invoke the onclick handler from Javascript if you want to simulate a click, but you must remember to do this manually. The snippets you posted would differ in this regard, which could be the cause of any behavioural differences.

Perverse

Answer 4

With the anchor you can specify the target property, but with window.location.href you can't. Generally the anchor is used when a user wants to redirect the browser to another location, window.location.href is used when the redirection is done using javascript.

Pew

Well, that's kind of true but a bit misleading. You choose the target implicitly in the Javascript version by the object you call the method on. window.location.href changes the current window, but mytarget.location.href would change another window/frame (assuming the variable was declared appropriately). – Perverse

Regardless, you should not be using the target attribute anyways. – Schifra

And who said that? Anyway he ask for differences and this is one of them so keep voting down but it's right. @dtsazza: you are right but he is talking about window.location not somethingElse.location – Pew

@mck: yeah, hence the fudgery in my first sentence. Strictly as written you're right, but I interpreted the question in the slightly broader sense of "javascript vs anchor-clicking"; the limitation you mentioned doesn't apply to the Javascript approach in general. (Though I merely didn't vote at all, I don't think your answer deserves downvoting, merely clarifying. :-)) – Perverse

Answer 5

In addition to the other answers given, clicking on an <a> element with the href attribute sapecified will cause the browser to navigate to the URL in the href, regardless of whether JavaScript is enabled or not.

Denizen

Answer 6

document.referrer contains a reference on the server and client to the url of the page that contained the link the user clicked to get to the new page- scripted location methods do not.

Complication