JavaScript 中的 window.location 和 document.location 有啥区别？

Posted 2023-02-22

【中文标题】JavaScript 中的 window.location 和 document.location 有啥区别？

【英文标题】：What's the difference between window.location and document.location in JavaScript?JavaScript 中的 window.location 和 document.location 有什么区别？

【发布时间】：2011-01-26 17:16:21

【问题描述】：

他们应该引用同一个对象吗？

【问题讨论】：

有关显示它们差异的用例，请参阅***.com/a/12098898/632951

【参考方案1】：

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

见：http://www.w3.org/TR/html/browsers.html#dom-location

【讨论】：

投反对票。回答自相矛盾。它大胆地说它们是相同的，然后用较浅的文本描述它们的差异。它们显然不一样。

来吧，触发快乐的投票者，放松一点。在大多数情况下，考虑到 rahul 指定的警告，它们的行为相似。让我们不要把他钉在语义上。小费城，先生们。我，一方面，发现他的回答完全令人满意。 +1（Christoph 的答案应该是公认的，但 rahul 的答案是可以接受的——至少，不值得投反对票。）

-1 用于推荐最佳实践（始终使用window.location），但没有提供任何理由。如果你不提供理由，为什么有人要接受你的建议？ Christoph 的回答在这方面要有用得多。

+1 但也请参阅下面 Phil Hamer 和 Christoph 的答案，他们添加了基本的背景信息和警告以充分理解该问题。

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

【参考方案2】：

获取当前位置对象的规范方法是window.location（参见this MSDN page from 1996 和the W3C draft from 2006）。

将此与 document.location 进行比较，后者最初仅将当前 URL 作为字符串返回（请参阅 this page on MSDN）。可能是为了避免混淆，document.location 被替换为document.URL（参见here on MSDN），这也是DOM Level 1 的一部分。

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

【讨论】：

如果你使用window.location，是不是同样有效，只使用location？

@commonpike 它是 -- 在 [至少] HTML 文档中的脚本上下文中，所有已定义变量都成为属性的全局对象是 window 对象。因此，您在脚本顶层定义的任何变量或函数都是window 引用的对象的属性，它恰好是全局对象。像window. 这样不存在时会隐含全局对象——因此location 被解释为window.location。注意事项 - f.e.如果未定义变量，if(an_undefined_variable) 将抛出错误 -- if(window.an_undefined_variable) 不会。

【参考方案3】：

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

document.location 在 Internet Explorer 中是只读的（至少），但在基于 Gecko 的浏览器（Firefox、SeaMonkey）中是读/写的。

【讨论】：

我无法重现 document.location 在 IE 中为只读的说法。我可以在 IE 10、9、8 和 6 中成功分配给它（使用来自modern.ie 的 VM）。

console.log(location); 上的任何 cmets ？！！

【参考方案4】：

document.location 最初是一个只读属性，尽管Gecko browsers 也允许您分配给它。为了跨浏览器的安全，请改用window.location。

阅读更多：

document.location

window.location

【讨论】：

我找不到明确的答案何时使用它们中的任何一个，看看下面我的答案

【参考方案5】：

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

<img name='location' src='location.png'>

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

【讨论】：

没有优先级，直接被覆盖了

不，它没有被覆盖。它被遮蔽了，所以 Phil 关于在属性解析期间优先考虑元素是正确的。

@kangax，看来你是对的：jsfiddle.net/uL4ysszr。但是这种行为有多可靠？是否足够跨浏览器？

刚刚测试过这个（2016 年 10 月）。 window.location 和 document.location 似乎无法在 Chrome 或 Firefox 中被隐藏。

@Mr.Llama 你是对的。似乎所有现代浏览器都不再以我上面描述的方式运行。这似乎是由于给 document.location 赋予了“不可伪造”属性。相关 Chromium 更改：src.chromium.org/viewvc/blink?view=revision&revision=189862 和 Firefox 错误：bugzilla.mozilla.org/show_bug.cgi?id=1133760

【参考方案6】：

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

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

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

【参考方案7】：

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

还有

document.location.constructor === window.location.constructor 是true

注意：刚刚在 Firefox 3.6、Opera 10 和 IE6 上测试

【讨论】：

@Pacerier 为什么？对于对象，=== 和 == 是等价的。

@MarkAmery，这是错误的，很容易证明："abc" == new String("abc") 返回true 而"abc" === new String("abc") 返回false。

@Pacerier 好的，让我稍微严格一点，不那么含糊地说：当比较 两个对象 彼此（而不仅仅是一个对象与任何东西）时，==和=== 是等价的。请参阅the spec 第 11.9.3 和 11.9.6 节。对于具有相同类型的非空、非未定义、非数字、非布尔、非字符串值，== 行为受 11.9.3 第 1f 部分约束，=== 行为受 11.9.6 第 7 部分约束, 如果 x 和 y 指的是同一个对象，则相同地读取 Return true。否则，返回false。

@MarkAmery，不能保证document.location 和window.location 都指向对象。你错过了三等号的全部意义；使用 2 个等于 并不能证明它们是同一个 obj。 我们应该使用 3 个等于而不是 2 个等于，因为 2 个等于会给我们一个误报。 在浏览器上 document.location 是一个等于 window.location.toString() 的 URL 字符串，那么 document.location==window.location 将返回 true而document.location===window.location 将返回 false。

@Pacerier Aha - 我终于明白了。你是完全正确的，至少就document.location === window.location 比较而言。我认为，.constructor 比较的事实也意味着这个答案仍然合理，但使用=== 会简化推理。

【参考方案8】：

是的，它们是一样的。这是浏览器 JS API 中的众多历史怪癖之一。尝试做：

window.location === document.location

【参考方案9】：

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

【参考方案10】：

现在很少看到差异，因为 html 5 不再支持框架集。但是在我们有框架集的时候，document.location 只会重定向正在执行代码的框架，而 window.location 会重定向整个页面。

【参考方案11】：

至少在IE中，对本地文件有一点区别：

document.URL 将返回 "file://C:\projects\abc\a.html"

但是 window.location.href 会返回 "file:///C:/projects/abc/a.html"

一个是反斜杠，一个是正斜杠。

【参考方案12】：

嗯，是的，它们是一样的，但是....！

window.location 不适用于某些 Internet Explorer 浏览器。

【参考方案13】：

我想说window.location 是获取当前URL 的更可靠方法。 以下是前面提到的window.location 和document.url 之间的区别，其中一种情况是我在 URL 中附加哈希参数并稍后读取它。

在 URL 中添加哈希参数后。

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

所以最好使用window.location。

【讨论】：

-1。这个问题甚至没有提到document.URL - 它是关于window.location 和document.location。另外，document.url 不存在 = 它应该是大写的。

【参考方案14】：

document.location.constructor === window.location.constructor 是true。

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

因此无需比较构造函数或任何其他属性。

【参考方案15】：

尽管大多数人在这里推荐，这就是 Google Analytics 的动态协议被剪断多年的样子（在他们最近从 ga.js 迁移到 analytics.js 之前）：

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

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

在新版本中他们使用'//'，所以浏览器可以自动添加协议：

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

所以如果 Google 在需要 JS 协议时更喜欢 document.location 而不是 window.location，我想他们有一些原因。

总体：我个人认为document.location 和window.location 是相同的，但是如果使用 对Google 等浏览器的使用情况有最大的统计数据document.location，我建议关注他们。

【讨论】：

我没有投反对票，但是，这可能是因为这是一个非常古老的问题，而您的回答并没有提供任何新的或有价值的证据证明一个比另一个更好。或者，这可能是因为您的回答与公众舆论相反，无论您对 Google 历史上所做的事情的评价如何。或者，可能是反对者只是不喜欢你如何强调你的答案中不需要强调的部分。真的可以是任何东西。这就是对 SO 进行匿名投票的美妙之处。

【参考方案16】：

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