358

When would you set location to a URL string versus setting location.href?

location = "http://www.stackoverflow.com";

vs

location.href = "http://www.stackoverflow.com";

Mozilla Developer Network Reference

Improve this question
4

8 Answers 8

Reset to default
293

You might set location directly because it's slightly shorter. If you're trying to be terse, you can usually omit the window. too.

URL assignments to both location.href and location are defined to work in JavaScript 1.0, back in Netscape 2, and have been implemented in every browser since. So take your pick and use whichever you find clearest.

Improve this answer
1
  • 13
    Like mentioned by @SwissMister in the answer below, it seems that window.location.href is somewhat treated like an XHR request. If fired from within an XHR's success callback, window.location.href will be treated as an XHR while window.location emulates clicking on a link.
    – Akshay Raje
    Commented Jul 6, 2016 at 10:35
151

Even if both work, I would use the latter.

Improve this answer
3
  • 69
    While implementing a complex PayPal integration, I encountered a very compelling reason to use window.location: it does not require SAME ORIGIN.
    – Swiss Mister
    Commented Jul 4, 2014 at 13:55
  • 5
    Maybe it's just me but location = 'http://www.example.com' seems super readable. Albeit, as a special case. That is backwards compatible and will remain compatible in the foreseeable future.
    – Alex W
    Commented Apr 29, 2015 at 15:37
  • 12
    If window.location were an object, assigning a string to it would overwrite it with a string. In fact window.location is a property which has getter and setter methods. When you set it, a string is expected and the global Location object is updated by the setter. When you get it, the global Location object is returned.
    – JukkaP
    Commented Apr 22, 2016 at 7:08
65

Like as has been said already. But, you will do better to use the .href version.

Improve this answer
10
  • 13
    Good explanation, better than just general comments about readability or maintenance. In reality in this particular case the object model will not be changed, as half the web would halt - therefore use either... it doesn't matter which
    – six5536
    Commented May 18, 2012 at 20:38
  • 74
    This sounds good but isn't really true. There is no concept of a default property in the DOM or JavaScript in general. Assigning a string to location works because the property was defined to have this special assignment behaviour back in JavaScript 1.0 and every browser since has implemented that. HTML5 now requires it. So whilst it may be prettier or more consistent to assign to .href, there is no backward or forward compatibility advantage to doing so.
    – bobince
    Commented Nov 12, 2012 at 22:36
  • 4
    window.location = url is prettier
    – Eric
    Commented Feb 18, 2014 at 1:58
  • 24
    location = url is cuter
    – fregante
    Commented Jun 18, 2014 at 0:53
  • 1
    "location.href = url is technically more correct" No, it isn't. As most it's more like the rest of Javascript. But in fact Location is a well-defined object and the specs around it are clear and implemented consistently across the board. So location = url is equally correct. But shorter. And thus should, imho, be preferred in our perpetual quest to shave as much overhead off of our pages as possible.
    – Stijn de Witt
    Commented Sep 12, 2016 at 19:38
24

A couple of years ago, location did not work for me in IE and location.href did (and both worked in other browsers). Since then I have always just used location.href and never had trouble again. I can't remember which version of IE that was.

Improve this answer
5
  • 46
    It was probably that one version of IE where it did stuff wrong and every other browser did it correctly. ;-)
    – Shawn D.
    Commented Oct 8, 2013 at 20:26
  • 9
    in strict mode chrome will throw an exception if you try to assign directly to location too, so I always use location.href
    – Hashbrown
    Commented Oct 18, 2013 at 5:42
  • 10
    "one" version of IE?
    – Lpc_dark
    Commented Jan 4, 2016 at 6:12
  • @Shawn D. A browser doing things correctly? When did that happen! :D
    – user2173353
    Commented Aug 17, 2017 at 10:52
  • @Lpc_dark each one*
    – Bojidar Stanchev
    Commented Sep 3, 2020 at 14:03
20

One difference to keep in mind, though.

Let's say you want to build some URL using the current URL. The following code will in fact redirect you, because it's not calling String.prototype.replace but Location.prototype.replace:

nextUrl = window.location.replace('/step1', '/step2');

The following codes work:

// cast to string
nextUrl = (window.location+'').replace('/step1', '/step2');

// href property
nextUrl = window.location.href.replace('/step1', '/step2');
Improve this answer
0
16

Just to clarify, you can't do location.split('#'), location is an object, not a string. But you can do location.href.split('#'); because location.href is a string.

Improve this answer
1
  • 3
    Your comment is true, but you are talking about getting the href attribute, a string, of the location object. All the other discussions are dealing with assigning a value, not reading the value. But your point is correct. The difference is that href is a string while location is an object.
    – Phil DD
    Commented Jul 31, 2014 at 14:54
11

With TypeScript, use window.location.href as window.location is technically an object containing:

Properties
hash
host
hostname
href    <--- you need this
pathname (relative to the host)
port
protocol
search

Setting window.location will produce a type error, while window.location.href is of type string.

Source

Improve this answer
0
3

Use global.location.href instead, while working with React.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.