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

Question

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

javascript

63

document.location.href和document.location有何区别？

这个差别在不同的浏览器中是否一样？

- Michel

document.location 是一个对象。 - ant

1

一切皆为对象。我认为你的意思是，与 location.href 不同，它不是一个简单的字符串。 - Max Shawabkeh

1

@Max Shawabkeh 是的，location.href是一个字符串。 - ant

7个回答

31

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

其中之一是 href 属性，包含完整的 URL，即所有其他属性合在一起的内容。

有些浏览器允许你将 URL 分配给 location 对象，并将其作为分配给 href 属性的操作。而另一些浏览器比较挑剔，需要你使用 href 属性。因此，为了让代码在所有浏览器中都正常工作，你必须使用 href 属性。

window 和 document 对象都具有一个 location 对象。你可以使用 window.location.href 或 document.location.href 来设置 URL。然而，逻辑上来说，document.location 对象应该是只读的（因为你无法更改文档的 URL；更改 URL 会加载一个新的文档），因此为了安全起见，在想要设置 URL 的时候最好使用 window.location.href。

- Guffa

13

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

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

- slier

点符号本身就能澄清这个问题。 - arkon

6

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

在某些浏览器中 - 大多数现代浏览器，我认为 - 您也可以将值分配给document.location，就好像它是一个字符串一样。然而，根据Mozilla文档，更好的做法是使用window.location来实现此目的，因为document.location最初是只读的，因此可能不被广泛支持。

- D. Evans

3

截至2013年6月14日（HTML5），有一个重要的区别。

浏览器：Chrome 27.X.X

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

document.location

类型：对象

当单独调用时，对象document.location返回其origin + pathname属性连接在一起。

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

ancestorOrigins: DOMStringList
assign: function () { [native code] }
hash: ""
host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "https://dev59.com/AnE85IYBdhLWcg3wr1yx"
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

类型: 字符串

https://dev59.com/AnE85IYBdhLWcg3wr1yx

- Jeff Noel

3

document.location已经被废弃，建议使用window.location代替，可以通过location直接访问它，因为它是一个全局对象。

location对象有多个属性和方法。如果你试图将其用作字符串，则会像location.href一样运行。

- MAS1

0

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

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

<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，您可以在观察面板中看到它正在写入“Location -> ...”而不是“...”作为url。这让我意识到它是一个对象

人们本来期望replace会抛出异常或其他什么东西，但现在我想到的问题是它试图在URL对象上调用一些不存在的“replace”方法，这似乎只会在Javascript中返回“undefined”。

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

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

- George Birbilis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

document.location是一个已经被弃用的与window.location同义的术语，它的弃用时间几乎与JavaScript的存在时间一样长了。不要使用它。

location是一个结构化对象，具有与URL部分相对应的属性。 location.href是单个字符串中的整个URL。将字符串分配给任何一个都会引起相同类型的导航，所以你可以随意选择。

我认为写成location.href = something稍微好一些，因为它更明确地表达了正在进行的操作。通常情况下，你应该避免只使用location = something，因为它看起来误导人，像一个变量赋值。不过window.location = something完全没有问题。