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

setting location.href mail fail because of same-origin-policy: javascript.info/tutorial/… — Taha Jahangir
– Taha Jahangir, Commented Aug 25, 2014 at 7:49
Also, replace and assign: stackoverflow.com/q/1865837/632951 , stackoverflow.com/q/7703689/632951 , stackoverflow.com/q/10302905/632951 — Pacerier
– Pacerier, Commented Sep 28, 2014 at 14:16
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
– Chris Halcrow, Commented Feb 28, 2018 at 4: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: javascript.info/cross-window-communication#4q5rssu5ys — fcole90
– fcole90, Commented May 4, 2022 at 8:45

Aamir Afridi · Accepted Answer · 2016-01-21 22:07:42Z

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.

edited Jan 21, 2016 at 22:07

Aamir Afridi

6,4313 gold badges44 silver badges42 bronze badges

answered Mar 4, 2010 at 23:11

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay Raje Over a year ago

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.

Peter Mortensen · Accepted Answer · 2022-12-13 00:58:13Z

151

Even if both work, I would use the latter.

edited Dec 13, 2022 at 0:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 4, 2010 at 23:12

psychotik

39.2k35 gold badges104 silver badges136 bronze badges

3 Comments

Swiss Mister Over a year ago

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

Alex W Over a year ago

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.

user3397971 Over a year ago

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.

Peter Mortensen · Accepted Answer · 2022-12-13 00:58:50Z

65

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

edited Dec 13, 2022 at 0:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 4, 2012 at 17:15

Kirby L. Wallace

7875 silver badges2 bronze badges

10 Comments

six5536 Over a year ago

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

bobince Over a year ago

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.

hashwarp Over a year ago

window.location = url is prettier

fregante Over a year ago

location = url is cuter

Stijn de Witt Over a year ago

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

|

Timo Tijhof · Accepted Answer · 2014-11-18 22:47:44Z

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.

edited Nov 18, 2014 at 22:47

Timo Tijhof

10.4k6 gold badges38 silver badges53 bronze badges

answered Dec 27, 2012 at 14:25

Dovev Hefetz

1,46616 silver badges21 bronze badges

5 Comments

Shawn D. Over a year ago

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

Hashbrown Over a year ago

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

Lpc_dark Over a year ago

"one" version of IE?

user2173353 Over a year ago

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

Bojidar Stanchev Over a year ago

@Lpc_dark each one*

Zachiah · Accepted Answer · 2023-08-05 07:09:40Z

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

edited Aug 5, 2023 at 7:09

Zachiah

2,65713 silver badges32 bronze badges

answered Dec 4, 2015 at 23:26

Gras Double

16.5k9 gold badges61 silver badges56 bronze badges

Comments

Timo Tijhof · Accepted Answer · 2014-11-18 22:48:07Z

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.

edited Nov 18, 2014 at 22:48

Timo Tijhof

10.4k6 gold badges38 silver badges53 bronze badges

answered May 7, 2014 at 15:01

Chadams

1,9631 gold badge18 silver badges15 bronze badges

1 Comment

Phil DD Over a year ago

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.

Peter Mortensen · Accepted Answer · 2022-12-13 01:00:09Z

13

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

edited Dec 13, 2022 at 1:00

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 7, 2019 at 9:49

Tigerware

3,9723 gold badges27 silver badges42 bronze badges

Comments

Ashwani Panwar · Accepted Answer · 2021-09-30 06:39:47Z

3

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

answered Sep 30, 2021 at 6:39

Ashwani Panwar

4,6563 gold badges53 silver badges78 bronze badges

Collectives™ on Stack Overflow

JavaScript: Setting location.href versus location

8 Answers 8

1 Comment

3 Comments

10 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

3 Comments

10 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related