Javascript document.location.href 和 document.location 有什么区别？

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

提问by Michel

What is the difference between document.location.hrefand document.location?

document.location.href和 和有document.location什么区别？

Is it the same across browsers?

跨浏览器是一样的吗？

回答by bobince

document.locationis a synonym for window.locationthat has been deprecated for almost as long as JavaScript has existed. Don't use it.

document.locationwindow.location几乎与 JavaScript 存在一样，它的同义词已被弃用。不要使用它。

locationis a structured object, with properties corresponding to the parts of the URL. location.hrefis 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.

location是一个结构化对象，其属性对应于 URL 的各个部分。location.href是单个字符串中的整个 URL。将字符串分配给任何一个被定义为导致相同类型的导航，因此请选择。

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

我认为写作location.href = something要稍微好一些，因为它对它在做什么更明确一些。您通常希望避免，location = something因为它看起来像一个变量赋值。window.location = something不过还好。

回答by Guffa

The document.locationis an object that contains properties for the current location.

的document.location是，包含当前位置属性的对象。

The hrefproperty is one of these properties, containing the complete URL, i.e. all the other properties put together.

该href属性是这些属性之一，包含完整的 URL，即所有其他属性放在一起。

Some browsers allow you to assign an URL to the locationobject and acts as if you assigned it to the hrefproperty. Some other browsers are more picky, and requires you to use the hrefproperty. Thus, to make the code work in all browsers, you have to use the hrefproperty.

某些浏览器允许您将 URL 分配给location对象，并且就像您将其分配给href属性一样。其他一些浏览器更挑剔，需要您使用该href属性。因此，要使代码在所有浏览器中都能正常工作，您必须使用该href属性。

Both the windowand documentobjects has a locationobject. You can set the URL using either window.location.hrefor document.location.href. However, logically the document.locationobject should be read-only (as you can't change the URL of a document; changing the URL loads a new document), so to be on the safe side you should rather use window.location.hrefwhen you want to set the URL.

thewindow和documentobjects 都有一个location对象。您可以使用window.location.href或设置 URL document.location.href。但是，从逻辑上讲，document.location对象应该是只读的（因为您不能更改文档的 URL；更改 URL 会加载一个新文档），因此为了安全起见，您应该window.location.href在想要设置 URL 时使用.

回答by slier

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

The hrefproperty is a string, while document.locationitself is an object.

该href属性是一个字符串，而document.location它本身是一个对象。

回答by D. Evans

document.locationis an object, while document.location.hrefis a string. But the former has a toStringmethod, so you can read from it as if it was a string and get the same value as document.location.href.

document.location是一个对象，document.location.href而是一个字符串。但是前者有一个toString方法，所以你可以像读取字符串一样读取它并获得与document.location.href.

In some browsers - most modern ones, I think - you can also assign to document.locationas if it were a string. According to the Mozilla documentationhowever, it is better to use window.locationfor this purpose as document.locationwas originally read-only and so may not be as widely supported.

在某些浏览器中——我认为是最现代的浏览器——你也可以将document.location它赋值为一个字符串。然而，根据Mozilla 文档，最好将其window.location用于此目的，因为document.location它最初是只读的，因此可能不会得到广泛支持。

回答by MAS1

document.location is deprecated in favor of window.location, which can be accessed by just location, since it's a global object.

document.location 已被弃用，取而代之的是 window.location，它只能通过 location 访问，因为它是一个全局对象。

The location object has multiple properties and methods. If you try to use it as a string then it acts like location.href.

location 对象有多个属性和方法。如果您尝试将其用作字符串，则它的作用类似于 location.href。

回答by Jeff Noel

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

截至2013 年 6 月 14 日（HTML5），存在显着差异

Browser : Chrome 27.X.X

Browser : Chrome 27.X.X

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

参考资料：document.location, window.location( MDN)

---

---

document.location

文件位置

type: Object

type: Object

The object when called by itself document.locationreturn its origin+ pathnameproperties concatenated.

该对象在被自身调用时document.location返回其连接的origin+pathname属性。

To retrieve just the URL as a string, the read-only document.URLproperty can be used.

要仅以字符串形式检索 URL，document.URL可以使用只读属性。

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

文件.location.href

type: string

type: string

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

回答by George Birbilis

Here is an example of the practical significance of the difference and how it can bite you if you don't realize it (document.location being an object and document.location.href being a string):

下面是一个例子，说明差异的实际意义以及如果你没有意识到它是如何咬你的（document.location 是一个对象，document.location.href 是一个字符串）：

We use MonoX Social CMS (http://mono-software.com) free version at http://social.ClipFlair.netand we wanted to add the language bar WebPart at some pages to localize them, but at some others (e.g. at discussions) we didn't want to use localization. So we made two master pages to use at all our .aspx (ASP.net) pages, in the first one we had the language bar WebPart and the other one had the following script to remove the /lng/el-GR etc. from the URLs and show the default (English in our case) language instead for those pages

我们在http://social.ClipFlair.net使用 MonoX Social CMS ( http://mono-software.com) 免费版本，我们想在某些页面添加语言栏 WebPart 以对其进行本地化，但在其他一些页面（例如在讨论中）我们不想使用本地化。所以我们制作了两个母版页以用于我们所有的 .aspx (ASP.net) 页面，在第一个我们有语言栏 WebPart，另一个有以下脚本从 /lng/el-GR 等中删除URL 并为这些页面显示默认（在我们的例子中是英语）语言

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

But this code isn't working, replace function just returns Undefined (no exception thrown) so it tries to navigate to say x/lng/el-GR/undefined instead of going to url x. Checking it out with Mozilla Firefox's debugger (F12 key) and moving the cursor over the curAddr variable it was showing lots of info instead of some simple string value for the URL. Selecting Watch from that popup you could see in the watch pane it was writing "Location -> ..." instead of "..." for the url. That made me realize it was an object

但是这段代码不起作用，replace 函数只返回 Undefined（没有抛出异常），所以它试图导航到 x/lng/el-GR/undefined 而不是去 url x。使用 Mozilla Firefox 的调试器（F12 键）检查它并将光标移动到 curAddr 变量上，它显示了大量信息，而不是 URL 的一些简单字符串值。从该弹出窗口中选择 Watch 您可以在 watch 窗格中看到它正在为 url 写入“Location -> ...”而不是“...”。这让我意识到这是一个物体

One would have expected replace to throw an exception or something, but now that I think of it the problem was that it was trying to call some non-existent "replace" method on the URL object which seems to just give back "undefined" in Javascript.

人们会期望替换抛出异常或其他东西，但现在我想到了问题是它试图在 URL 对象上调用一些不存在的“替换”方法，该方法似乎只是返回“未定义” Javascript。

The correct code in that case is:

在这种情况下，正确的代码是：

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