window.location 和 document.location 有什么区别？

Question

window.location 和 document.location 有什么区别？它们都应该引用同一个对象吗？

Answer 1

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

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

Answer 2

获取当前位置对象的规范方法是 window.location （请参阅 1996 年的此 MSDN 页面 和 W3C 草案从 2006 年开始）。

将此与 document.location 进行比较，后者最初仅以字符串形式返回当前 URL（请参阅 MSDN 上的此页面）。可能是为了避免混淆，document.location 被替换为 document.URL（请参阅 MSDN 上），它也是 DOM 级别 1。

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

Answer 3

window.location 在所有兼容的浏览器上均可读取/写入。

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

Answer 4

document.location 最初是只读属性，尽管 Gecko 浏览器 也允许您对其进行分配。为了跨浏览器安全，请改用 window.location。

了解更多：

document.location

window.location

Answer 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!')

Answer 6

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

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

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

Answer 7

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

并且

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

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

Answer 8

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

window.location === document.location

Answer 9

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

Answer 10

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

Answer 11

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

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

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

Answer 12

至少在 IE 中，它对本地文件有一点不同：

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

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

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

Answer 13

是的，它们是相同的，但是......！

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

Answer 14

tl;dr 它们实际上总是相同的。首选window.location。

Document 对象的位置 getter 步骤是返回相关全局对象的 Location 对象（如果它完全活动），否则返回 null。

Window 对象的位置 getter 步骤是返回该对象的 Location 对象。

https://html.spec.whatwg .org/multipage/nav-history-apis.html#dom-location

它们什么时候不同？如果文档未完全激活。例如：

const iframe = document.createElement("iframe");
document.body.append(iframe);
const { contentDocument, contentWindow } = iframe;
iframe.remove();
contentWindow.location; // not null
contentDocument.location // null

Answer 15

我想说 window.location 是获取当前 URL 的更可靠方法一个>。
以下是我在 URL 中附加哈希参数并稍后读取它的场景之一中前面的 window.location 和 document.url 之间的区别。

在 URL 中添加哈希参数后。

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

因此，最好使用 window.location。

Answer 16

我更喜欢使用 document.location，即使 location、document.location 和 window.location 返回相同的对象。

使用 document.location 的原因是：

1. window.location 提及

在 Firefox 57 之前，通过 URL API 访问时，URL 中包含的单引号会被转义。请参阅错误 1386683。

2. document.location< 的浏览器兼容性部分/a> 提及

全力支持。

3. Mdn 位置参考使用 document.location 在他们的示例中。

   // 位置：https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
   const loc = 文档.location;
   console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
   console.log(loc.协议); // https:
   console.log(loc.host); //developer.mozilla.org:8080
   console.log(loc.主机名); // 开发者.mozilla.org
   console.log(loc.port); // 8080
   console.log(loc.路径名); // /en-US/搜索
   console.log(loc.search); // ?q=URL
   console.log(loc.hash); // #search-结果-关闭-容器
   console.log(loc.origin); // https://developer.mozilla.org:8080
   
   location.assign('http://another.site') // 加载另一个页面
   

Answer 17

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

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

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

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

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

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

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

Answer 18

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