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

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

浏览器是否一样?

document.locationwindow.location一个同义词,几乎和JavaScript一样,已经被弃用了。 不要使用它。

location是一个结构化对象,其属性对应于URL的各个部分。 location.href是单个string中的整个URL。 将string分配给任一个被定义为导致相同种类的导航,所以请select。

(我认为写信给location.href= something稍微更好一点,因为它略微更清楚地说明它在做什么。你通常希望避免只是location= something因为它看起来像一个variables赋值的误导window.location= something是罚款虽然)。

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

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

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

windowdocument对象都有一个location对象。 您可以使用window.location.hrefdocument.location.href来设置URL。 但是,逻辑上document.location对象应该是只读的(因为您不能更改文档的URL;更改URL加载一个新的文档),所以为了安全起见,您应该使用window.location.href当你想要设置url的时候。

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

href属性是一个string,而document.location本身是一个对象。

document.location不赞成使用window.location,因为它是一个全局对象,可以通过location来访问它。

位置对象有多个属性和方法。 如果你尝试使用它作为一个string,那么它就像location.href。

document.location是一个对象,而document.location.href是一个string。 但是前者有一个toString方法,所以你可以像读取string一样读取,并获得与document.location.href相同的值。

在一些浏览器中 – 我认为最现代的浏览器 – 你也可以将document.location赋值为一个string。 然而,根据Mozilla的文档 ,最好使用window.location来实现这个目的,因为document.location最初是只读的,所以可能不被广泛支持。

截至2013年6月14日HTML5 ),存在显着差异

Browser : Chrome 27.XX

参考: document.location , window.locationMDN


document.location

type: Object

当它自己调用document.location时,该对象返回其连接的origin + pathname属性。

要仅将URL作为string检索,可以使用只读的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 

这里是一个差别的实际意义的例子,以及如果你没有意识到它的存在(document.location是一个对象,document.location.href是一个string),它会如何咬你。

我们在http://social.ClipFlair.net使用MonoX Social CMS( http://mono-software.com )免费版本,我们想在一些页面添加语言栏WebPart来本地化它们,但是在其他一些页面(例如在讨论中),我们不想使用本地化。 因此,我们在所有.aspx(ASP.net)页面上创build了两个主页面,第一个页面上有语言栏WebPart,另一个页面有以下脚本来删除/ lng / el-GR等这些url,并显示默认(在我们的情况下是英文)的语言,而不是那些网页

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

但是这个代码不工作,replace函数只是返回Undefined(没有抛出exception),所以它试图导航到x / lng / el-GR / undefined而不是去url x。 用Mozilla Firefox的debugging器(F12键)检查出来,并将光标移动到curAddrvariables上,它显示了很多信息,而不是URL的一些简单的string值。 从该popup窗口中selectWatch,可以在Watch窗格中看到它正在写入“Location – > …”而不是“…”。 这让我意识到这是一个对象

人们会期望replace抛出一个exception或什么的,但现在我认为它的问题是,它试图调用一些不存在的“replace”方法的URL对象,似乎只是回馈“未定义”的JavaScript。

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

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