javascript-document.location.href和document.location有什么区别?

document.location.hrefdocument.location有什么区别?

跨浏览器是否一样?

Michel asked 2019-11-18T17:33:21Z
7个解决方案
62 votes

location.href = somethinglocation = something的同义词,在存在JavaScript的前提下,它已被弃用。 不要使用它。

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

我认为写location.href = something会稍微好一点,因为它在做什么方面更加明确。 通常,您只希望避免location = something,因为它看起来像是变量分配,但会误导您。 window.location = something虽然很好。

bobince answered 2019-11-18T17:33:47Z
26 votes

window是一个对象,其中包含当前位置的属性。

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

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

windowdocument对象都有location对象。 您可以使用window.location.hrefdocument.location.href设置URL。但是,逻辑上document.location对象应该是只读的(因为您不能更改文档的URL;更改URL会加载新文档),以确保安全。 当您要设置网址时,您应该使用window.location.href

Guffa answered 2019-11-18T17:34:35Z
12 votes
typeof document.location; // 'object'
typeof document.location.href; // 'string'

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

slier answered 2019-11-18T17:35:01Z
5 votes

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

在某些浏览器中(我认为是大多数现代浏览器),您也可以将document.location分配为一个字符串。 但是,根据Mozilla文档,最好将window.location用于此目的,因为document.location最初是只读的,因此可能不受广泛支持。

D. Evans answered 2019-11-18T17:35:36Z
3 votes

不推荐使用document.location,而推荐使用window.location,因为window.location是全局对象,因此只能通过location进行访问。

位置对象具有多种属性和方法。 如果尝试将其用作字符串,则其作用类似于location.href。

MAS1 answered 2019-11-18T17:36:10Z
3 votes

截至2013年6月14日(HTML5),

document.location

参考:document.location,window.location(MDN)


文件位置

document.location

当对象本身被调用document.location时,将返回其串联的type: string + pathname属性。

要仅将URL作为字符串检索,可以使用只读的type: string属性。

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
Jeff Noel answered 2019-11-18T17:37:26Z
0 votes

这是一个差异的实际意义的示例,以及如果您不意识到差异(如document.location为对象而document.location.href为字符串)则如何咬住您:

我们在[http://social.ClipFlair.net]使用了MonoX Social CMS([http://mono-software.com)]免费版本,并且我们希望在某些页面上添加语言栏WebPart来对其进行本地化,但是在 其他一些(例如在讨论中)我们不想使用本地化。 因此,我们制作了两个母版页以在所有.aspx(ASP.net)页面上使用,在第一个母版页中,我们使用语言栏WebPart,而在另一个中则使用以下脚本从中删除了/ 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的一些简单字符串值。 从该弹出窗口中选择“监视”,您可以在监视窗格中看到该URL正在写“ Location-> ...”而不是“ ...”。 那使我意识到这是一个对象

有人会期望replace会引发异常或某些异常,但是现在我想到的是问题在于,它试图在URL对象上调用一些不存在的“ replace”方法,该方法似乎只是在其中返回“ undefined”。 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>
George Birbilis answered 2019-11-18T17:38:22Z
translate from https://stackoverflow.com:/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location