JavaScript中的window.location和document.location有什么区别?

What's the difference between window.location and document.location in JavaScript?

他们俩都应该引用同一个对象吗?


获取当前位置对象的规范方法是window.location(参见1996年的MSDN页面和2006年的W3C草案)。

将其与document.location进行比较,document.location最初仅将当前URL作为字符串返回(请参阅MSDN上的此页面)。可能为了避免混淆,document.location被替换为document.URL(参见MSDN),这也是DOM Level 1的一部分。

据我所知,所有现代浏览器都将document.location映射到window.location,但我仍然喜欢window.location,因为这是我在编写第一个DHTML后使用的。


根据W3C,它们是相同的。实际上,对于跨浏览器安全性,您应该使用window.location而不是document.location

请参阅:http://www.w3.org/TR/html/browsers.html#dom-location


window.location在所有兼容的浏览器上都是可读/写的。

document.location在Internet Explorer中是只读的(至少),但在基于Gecko的浏览器(Firefox,SeaMonkey)中是可读/写的。


document.location最初是一个只读属性,但Gecko浏览器也允许您分配它。对于跨浏览器安全性,请改用window.location

阅读更多:

document.location

window.location


有趣的是,如果你有一个名为"location"的框架,图像或表单,那么'document.location'分别提供对框架窗口,图像或表单的引用,而不是Location对象。显然,这是因为document.forms,document.images和window.frames集合名称查找优先于映射到window.location。

1
2
3
<img name='location' src='location.png'>

if (document.location.tagName == 'IMG') alert('Hello!')


据我所知,两者都是一样的。对于跨浏览器安全性,您可以使用window.location而不是document.location

所有现代浏览器都将document.location映射到window.location,但我仍然喜欢window.location,因为这是我在编写第一个网页后使用的内容。它更加一致。

您还可以看到document.location === window.location返回true,这表明两者都是相同的。


document.location === window.location返回true

document.location.constructor === window.location.constructortrue

注意:刚刚测试过,Firefox 3.6,Opera 10和IE6


是的,他们是一样的。这是浏览器JS API中众多历史怪癖中的一个。尝试做:

1
window.location === document.location

考虑到旧的浏览器,window.location是两者中更可靠的一致性。


现在很难看到差异,因为html 5不再支持框架集了。但是当我们有框架集时,document.location将仅重定向正在执行代码的框架,window.location将重定向整个页面。


我会说window.location是获取当前URL的更可靠方式。
以下是我在URL中附加哈希参数并稍后阅读它的场景之一中出现的window.locationdocument.URL之间的区别。

在URL中添加哈希参数后。

在较旧的浏览器中,我无法使用document.URL从URL获取哈希参数,但是当我使用window.location时,我能够从URL获取哈希参数。

所以使用window.location总是更好。


至少在IE中,它在本地文件上有一点差别:

document.URL将返回
"文件:// C:项目 ABC a.html"

但是window.location.href将返回
"文件:/// C:/projects/abc/a.html"

一个是反斜杠,一个是正斜线。


好吧,他们是一样的,但......!

window.location无法在某些Internet Explorer浏览器上运行。


document.location.constructor === window.location.constructortrue

这是因为它与document.location===window.location中的对象完全相同。

所以没有必要比较构造函数或任何其他属性。


实际上我注意到两者之间的chrome差异,例如,如果你想从子框架导航到沙盒框架,那么你可以只使用document.location而不是window.location


尽管大多数人都推荐这里,但谷歌分析的动态协议剪辑看起来好像很久(在他们最近从ga.js转移到analytics.js之前):

1
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

更多信息:https://developers.google.com/analytics/devguides/collection/gajs/

在新版本中,他们使用'//',因此浏览器可以自动添加协议:

1
'//www.google-analytics.com/analytics.js'

因此,如果Google在JS中需要协议时更喜欢document.location到window.location,我猜他们有一些理由。

总的来说:我个人认为document.locationwindow.location是相同的,但如果有关使用document.location等谷歌浏览器使用率最高的巨人,我建议关注它们。