What's the Difference Between Window.Location and Document.Location in JavaScript

What's the difference between window.location and document.location in JavaScript?

According to the W3C, they are the same. In reality, for cross browser safety, you should use window.location rather than document.location.

See: http://www.w3.org/TR/html/browsers.html#dom-location

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 is the difference between document.location.href and document.location?

document.location is a synonym for window.location that has been deprecated for almost as long as JavaScript has existed. Don't use it.

location is a structured object, with properties corresponding to the parts of the URL. location.href is the whole URL in a single string. Assigning a string to either is defined to cause the same kind of navigation, so take your pick.

I consider writing to location.href = something to be marginally better as it's slightly more explicit about what it's doing. You generally want to avoid just location = something as it looks misleadingly like a variable assignment. window.location = something is fine though.

Difference between document.URL and location.href

You can get the document.URL, but you can not set it.
You can both get and set the location.href.

In some webbrowsers, you are able to set the document.URL but please don't, as it doesn't work in most browsers.

You gave the answer yourself!

var currentURL = document.URL;
alert(currentURL);

Learn more here

window.location versus just location

I always use window.location in my code for two principal reasons:

1. It's a good habit to avoid global variables whenever possible. Using the window. prefix reminds me that the variable is global and that others aren't.
2. The nature of Javascript's scoping allows you to override variables set higher up the scope tree. This means that you could have set var location somewhere in a containing scope (it's not an unlikely word to use as a variable name) and you'd be working on that instead.

For me, clarity of purpose when coding is very important as it helps me avoid writing bugs and then helps me find them when I do.

Is there any difference with using only location vs using window.location across browsers

There are some differences.

In global scope, there is absolutely no difference between them, but in other cases you might get in trouble:

function () {
  var location = { 'href' : '123' } ;
  console.log(window.location.href) // actual url
  console.log(location.href) // '123'
}

This stems from the fact that if you write location without prefixing it with window, it will go up through every scope to find a variable named location. Eventually it will find it in window, unless another scope declared one as well. Obviously the reverse is true as well:

function () {
  var window = { 'location' : { 'href': '123' } };  
  console.log(window.location.href) // '123'
  console.log(location.href) // actual url
}

I for one prefer to prefix the global variables with window because that way i immediately know they are global and also because when i find a global variable that is not prefixed with window, i know it is a typo missing a var, but that is purely personal preference.

What's the difference between window.location= and window.location.replace()?

window.location adds an item to your history in that you can (or should be able to) click "Back" and go back to the current page.

window.location.replace replaces the current history item so you can't go back to it.

See window.location:

assign(url): Load the document at
the provided URL.

replace(url):Replace the current
document with the one at the provided
URL. The difference from the
assign() method is that after using
replace() the current page will not
be saved in session history, meaning
the user won't be able to use the Back
button to navigate to it.

Oh and generally speaking:

window.location.href = url;

is favoured over:

window.location = url;

---

Related Topics