document.location

Question

document.location.href和document.location之间的区别是什么？

跨浏览器是否相同？

Answer 1

document.location是window.location的同义词，只要JavaScript已存在，就已被弃用。不要使用它。

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

我认为写入location.href = something略微好一点，因为它对它正在做的事情略显明确。您通常希望避免使用location = something因为它看起来像变量赋值一样误导。 window.location = something虽然很好。

Answer 2

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

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

某些浏览器允许您为location对象分配URL，并将其分配给href属性。其他一些浏览器更挑剔，并要求您使用href属性。因此，要使代码在所有浏览器中都有效，您必须使用href属性。

window和document对象都有location个对象。您可以使用window.location.href或document.location.href设置网址。但是，从逻辑上讲，document.location对象应该是只读的（因为您无法更改文档的URL;更改URL会加载新文档），所以为了安全起见，您应该使用{{ 1}}当你想设置网址时。

Answer 3

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

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

Answer 4

document.location是一个对象，而document.location.href是一个字符串。但是前者有一个toString方法，因此您可以从中读取它，就好像它是一个字符串并获得与document.location.href相同的值。

在某些浏览器中 - 我认为大多数现代浏览器 - 您也可以分配给document.location，就好像它是一个字符串一样。但是，根据Mozilla documentation，最好将window.location用于此目的，因为document.location最初是只读的，因此可能不会得到广泛支持。

Answer 5

不推荐使用document.location而支持window.location，它只能通过location访问，因为它是一个全局对象。

location对象有多个属性和方法。如果您尝试将其用作字符串，那么它就像location.href一样。

Answer 6

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

Browser : Chrome 27.X.X

参考文献：document.location，window.location （ MDN ）

document.location

type: Object

自身调用的对象document.location会返回连接的origin + pathname个属性。

要仅将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

type: string

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

Answer 7

这是差异的实际意义的一个例子，如果你没有意识到它会如何咬你（document.location是一个对象而document.location.href是一个字符串）：

我们在http://mono-software.com使用MonoX Social CMS（http://social.ClipFlair.net）免费版本，我们想在某些页面添加语言栏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>

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

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

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

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

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

7 个答案:

document.location

document.location.href