Javascript: Setting Location.Href Versus Location

Javascript: Setting location.href versus location

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.

Difference between window.location and location.href

window.location is an object that holds all the information about the current document location (host, href, port, protocol etc.).

location.href is shorthand for window.location.href (you call location from global object - window, so this is window.location.href), and this is only a string with the full URL of the current website.

They act the same when you assign a URL to them - they will redirect to the page which you assign, but you can see differences between them when you open the browser console (firebug or developer tools) and write window.location and location.href.

What's the differences between window.location.href and a href /a ?

I think the main difference is what's happening behind the scene but on the surface they are pretty much giving the same effect.

window.location.href is only triggerable by JavaScript, or in JS context. Whereas a <a> tag defines hyperlink in HTML. It really depends on how you want to trigger this new page. You can either have a hyperlink a user can click/tap on, or you can trigger the page load by some JS functions that are triggered by certain actions.

To be more specific, a tag is common in webpages because browsers understand it and can apply CSS style to it to look nicer. As for window.location.href, there's no UI aspect for it, it simply is a line of JS code that you can trigger to either (1) get the current webpage URL or (2) set a value to it to redirect the user to some other URLs.

location.href property vs. location.assign() method

I always used and never had problems with:

location.href = url;

Calling a function should be slightly slower than accessing the property, but in terms of memory there should not be a big difference in my humble opinion.

Difference between window.location.href=window.location.href and window.location.reload()

If I remember correctly, window.location.reload() reloads the current page with POST data, while window.location.href=window.location.href does not include the POST data.

As noted by @W3Max in the comments below, window.location.href=window.location.href will not reload the page if there's an anchor (#) in the URL - You must use window.location.reload() in this case.

Also, as noted by @Mic below, window.location.reload() takes an additional argument skipCache so that with using window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite, and load the page from cache if possible.

window.location.href vs history.pushState - which to use?

history.pushstate does not make a new HTTP call (from mozilla doc quoted by you):

Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser.

window.location.href = "url" navigates the browser to new location, so it does make a new http request. Note: exception is the case when you specify new url as hash fragment. Then window is just scrolled to corresponding anchor

---

You can check both running them from devTools console having Network tab open. Be sure to enable "preserve log" option. Network tab lists all new http requests.

Is there any difference between window.location and window.location.href?

Yes, there is a difference. window.location is a Location object. window.location.href is a string representation of the location. The location object's toString() value is the same as the href property, so they are identical if used as strings. Setting window.location is the same as setting window.location.href.

window.location, however, has several other properties you can use, such as location.hostname, location.pathname and location.hash. So you could could set location.hash on its own to alter the hash value.

---

Related Topics