JavaScript: Setting location.href versus location

Question

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

Abwatt

setting location.href mail fail because of same-origin-policy: javascript.info/tutorial/… – Rowel

Also, replace and assign: https://mcmap.net/q/93875/-what-39-s-the-difference-between-window-location-and-window-location-replace/632951 , https://mcmap.net/q/93876/-window-location-href-vs-window-location-replace-vs-window-location-assign-in-javascript/632951 , https://mcmap.net/q/93877/-location-href-property-vs-location-assign-method/632951 – Acaulescent

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. – Mephistopheles

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: javascript.info/cross-window-communication#4q5rssu5ys – Snaggy

Answer 1

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.

Doura

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. – Affectation

Answer 2

Even if both work, I would use the latter.

Garland

While implementing a complex PayPal integration, I encountered a very compelling reason to use window.location: it does not require SAME ORIGIN. – Persas

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. – Ostrogoth

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. – Simpleminded

Answer 3

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

Lichi

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 – Rabah

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. – Doura

window.location = url is prettier – Recoil

location = url is cuter – Certify

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. – Cidevant

Down voting for the same reason as given by @Doura – Mortification

"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. – Pencel

window.location.href = url is stronger/smarter/bigger... =) – Condorcet

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. – Claud

This is the trashiest answer I ever saw on SO haha. Why not delete it? Almost everything has been crossed out – Earwitness

Answer 4

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.

Speechmaker

It was probably that one version of IE where it did stuff wrong and every other browser did it correctly. ;-) – Mendacity

in strict mode chrome will throw an exception if you try to assign directly to location too, so I always use location.href – Radioscope

"one" version of IE? – Isopod

@Shawn D. A browser doing things correctly? When did that happen! :D – Oulman

@Isopod each one* – Territus

Answer 5

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

Walkon

Answer 6

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.

Millepede

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. – Taxonomy

Answer 7

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

Palsgrave

Answer 8

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

Berenice