355

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
chimerical
  • 5,883
  • 8
  • 31
  • 37
  • 9
    setting `location.href` mail fail because of same-origin-policy: http://javascript.info/tutorial/same-origin-security-policy#can-t-get-but-can-set – Taha Jahangir Aug 25 '14 at 07:49
  • 1
    Also, `replace` and `assign`: http://stackoverflow.com/q/1865837/632951 , http://stackoverflow.com/q/7703689/632951 , http://stackoverflow.com/q/10302905/632951 – Pacerier Sep 28 '14 at 14:16
  • 2
    I have an Angular 4 app that uses TypeScript 2.6.2. window.location is read only and I can only assign using window.location.href (in the context of a callback from an angular subscription), without compiler errors being reaised- maybe that's some kind of JavaScript 1.0 compatability thing or related to asynchronous handling. Basically window.location.href seems to be the only thing that always works. – Chris Halcrow Feb 28 '18 at 04:00
  • Pertaining to the same-origin policy, note that the example you reference is within an iframe, so it might work differently when used on a normal page. Exact point of the page with the `location.href` policy: https://javascript.info/cross-window-communication#4q5rssu5ys – fcole90 May 04 '22 at 08:45

8 Answers8

292

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.

Aamir Afridi
  • 6,364
  • 3
  • 42
  • 42
bobince
  • 528,062
  • 107
  • 651
  • 834
  • 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 Jul 06 '16 at 10:35
151

Even if both work, I would use the latter.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
psychotik
  • 38,153
  • 34
  • 100
  • 135
  • 68
    While implementing a complex PayPal integration, I encountered a very compelling reason to use `window.location`: [it does not require `SAME ORIGIN`](http://javascript.info/tutorial/same-origin-security-policy). – Swiss Mister Jul 04 '14 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](http://www.w3.org/TR/html5/browsers.html#the-location-interface) in the foreseeable future. – Alex W Apr 29 '15 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 Apr 22 '16 at 07:08
66

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Kirby L. Wallace
  • 789
  • 5
  • 2
  • 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 – Relefant May 18 '12 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 Nov 12 '12 at 22:36
  • 4
    `window.location = url` is prettier – Eric Feb 18 '14 at 01:58
  • 24
    `location = url` is cuter – fregante Jun 18 '14 at 00:53
  • `location.href = url` is technically more correct and thus more safe (or fool-proof). In general, when you assign `myObject.someProp = someThing` you do not expect that the value of `someThing` will be assigned to `myObject.someProp.someInnerProp`, right? Then why would you expect it from `location.href`? It seems to be even dangerous to rely upon such behavior and assume that it will always work that quirky way. – JustAMartin Apr 24 '15 at 09:39
  • Down voting for the same reason as given by @bobince – Sai Dubbaka Mar 08 '16 at 16:42
  • 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 Sep 12 '16 at 19:38
  • `window.location.href = url` is stronger/smarter/bigger... =) – Kevin Fegan Oct 25 '16 at 23:03
  • 1
    As far as I can tell, this stuff about default properties is incorrect and there is no such thing in JS. I'll undo my downvote if someone can link to some documentation for how to override `=` in JS. – Max Heiber Jan 12 '17 at 02:36
  • This is the trashiest answer I ever saw on SO haha. Why not delete it? Almost everything has been crossed out – Erdal G. Jul 12 '20 at 18:10
23

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.

Timo Tijhof
  • 10,032
  • 6
  • 34
  • 48
Dovev Hefetz
  • 1,346
  • 14
  • 21
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');
Zachiah
  • 1,750
  • 7
  • 28
Gras Double
  • 15,901
  • 8
  • 56
  • 54
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.

Timo Tijhof
  • 10,032
  • 6
  • 34
  • 48
Chadams
  • 1,833
  • 1
  • 18
  • 15
  • 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 Jul 31 '14 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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Tigerware
  • 3,196
  • 2
  • 23
  • 39
3

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

Ashwani Panwar
  • 3,819
  • 3
  • 46
  • 66