CODEWITHSUNDEEP
javascript
LB.
LB.

Reputation: 14112

window.location.href vs clicking on an Anchor

What's the difference between clicking on:

<a href />

vs.

calling window.location.href = ...

?

Upvotes: 30

Views: 31384

Answers (6)

kennebec
kennebec

Reputation: 104770

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.

Upvotes: 0

Guffa
Guffa

Reputation: 700292

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

Upvotes: 5

nickf
nickf

Reputation: 546035

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!

Upvotes: 58

Andrzej Doyle
Andrzej Doyle

Reputation: 103787

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.

Upvotes: 1

Russ Cam
Russ Cam

Reputation: 125488

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.

Upvotes: 0

mck89
mck89

Reputation: 19231

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.

Upvotes: 0

Related Questions