What is the difference between document.location.href and document.location?

Question

What is the difference between document.location.href and document.location ?

Is it the same in browsers?

Answer 1

document.location is synonymous with window.location , which is almost as old as JavaScript existed. Do not use it.

location is a structured object with properties corresponding to parts of the URL. location.href is the entire URL in one line. The string assignment for any of them is determined in order to trigger the same navigation, so make a choice.

(I believe that the entry in location.href= something should be a little better, because it is a little clearer in what it does. Normally, you would like to avoid just location= something , because it looks like a variable assignment. window.location= something fine though.)

Answer 2

document.location is an object that contains properties for the current location.

The href property is one of these properties containing the full URL, i.e. all other properties stacked together.

Some browsers allow you to assign a URL to a location object and act as if you assigned it to the href property. Some other browsers are more picky and require the use of the href property. So that the code works in all browsers, you must use the href property.

Both window and document objects have a location object. You can set the URL using window.location.href or document.location.href . However, logically the document.location object should be read-only (since you cannot change the document’s document URL, changing the URL loads a new document), therefore, to be safe, you should use window.location.href when you want to set the url.

Answer 3

 typeof document.location; // 'object' typeof document.location.href; // 'string' 

The href property is a string, and document.location is an object.

Answer 4

document.location is deprecated in favor of window.location, which can only be accessed locally because it is a global object.

A location object has several properties and methods. If you try to use it as a string, then it will act as location.href.

Answer 5

document.location is an object, and document.location.href is a string. But the first one has a toString method, so you can read it as if it were a string and get the same value as document.location.href .

In some browsers - the most modern ones, I think - you can also assign document.location as if it were a string. According to Mozilla's documentation , window.location better for this purpose, since document.location was originally read-only, and therefore may not be as widely supported.

Answer 6

As of June 14, 2013 (HTML5) there is a significant difference

Browser : Chrome 27.XX

References: document.location , window.location (MDN)

---

document.location

type: Object

The object, which itself calls document.location , returns its origin + pathname properties.

To get only the URL as a string, you can use the read-only document.URL property.

 ancestorOrigins: DOMStringList assign: function () { [native code] } hash: "" host: "stackoverflow.com" hostname: "stackoverflow.com" href: "http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1" origin: "http://stackoverflow.com" pathname: "/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location" port: "" protocol: "http:" reload: function () { [native code] } replace: function () { [native code] } search: "?rq=1" toString: function toString() { [native code] } valueOf: function valueOf() { [native code] } 

---

document.location.href

type: string

 http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1 

Answer 7

Here is an example of the practical significance of the difference and how it can bite you if you do not realize it (document.location is the object, and document.location.href is the string):

We use the MonoX Social CMS ( http://mono-software.com ) free version at http://social.ClipFlair.net , and we wanted to add the WebPart language bar on some pages to localize them, but on some others (e.g. , in discussions) we did not want to use localization. Thus, we made two main pages for use on all of our .aspx pages (ASP.net), in the first of which we had the WebPart language bar, and the other had the following script to remove / lng / el -GR and t .d .. from the URLs and show the default language (English in our case) instead of these pages

 <script> var curAddr = document.location; //MISTAKE var newAddr = curAddr.replace(new RegExp("/lng/[az]{2}-[AZ]{2}", "gi"), ""); if (curAddr != newAddr) document.location = newAddr; </script> 

But this code does not work, the replace function simply returns Undefined (without exception), so it tries to go to the statement x / lng / el-GR / undefined instead of going to the URL x. Testing it with the Mozilla Firefox debugger (F12) and moving the cursor over the curAddr variable, it showed a lot of information instead of some simple string value for the URL. Selecting Watch from this pop-up that you could see in the watch bar, he wrote “Location → ...” instead of “...” for the URL. It made me realize that this is an object.

One might expect a replacement to throw an exception or something like that, but now that I was thinking about it, the problem was that he was trying to call some kind of non-existent "replace" method on the URL object, which seems to be , just returns ", undefined" in Javascript.

In this case, the correct code is:

 <script> var curAddr = document.location.href; //CORRECT var newAddr = curAddr.replace(new RegExp("/lng/[az]{2}-[AZ]{2}", "gi"), ""); if (curAddr != newAddr) document.location = newAddr; </script>