Javascript：设置 location.href 与位置

Posted 2023-04-14

【中文标题】Javascript：设置 location.href 与位置

【英文标题】：Javascript: Setting location.href versus location

【发布时间】：2011-01-23 21:55:53

【问题描述】：

您何时将location 设置为URL 字符串而不是设置location.href？

location = "http://www.***.com";

对

location.href = "http://www.***.com";

Mozilla Developer Network Reference

【问题讨论】：

设置location.href 邮件因同源策略而失败：javascript.info/tutorial/…

另外，replace 和 assign：***.com/q/1865837/632951，***.com/q/7703689/632951，***.com/q/10302905/632951

我有一个使用 TypeScript 2.6.2 的 Angular 4 应用程序。 window.location 是只读的，我只能使用 window.location.href 进行分配（在来自角度订阅的回调的上下文中），而不会引发编译器错误——这可能是某种 JavaScript 1.0 兼容性问题或与异步处理有关.基本上 window.location.href 似乎是唯一始终有效的东西。

【参考方案1】：

您可以直接设置location，因为它稍微短一些。如果您想简洁，通常也可以省略 window.。

location.href 和 location 的 URL 分配被定义为在 JavaScript 1.0 中工作，在 Netscape 2 中，并且已经在此后的每个浏览器中实现。因此，请选择并使用您认为最清晰的。

【讨论】：

就像@SwissMister 在下面的答案中提到的那样，似乎 window.location.href 在某种程度上被视为 XHR 请求。如果从 XHR 的成功回调中触发，window.location.href 将被视为 XHR，而 window.location 会模拟单击链接。

【参考方案2】：

即使两者都有效，我也会使用后者。 location 是一个对象，将字符串分配给一个对象对于可读性或维护来说并不是一个好兆头。

【讨论】：

在实现复杂的 PayPal 集成时，我遇到了一个非常有说服力的理由来使用 window.location:it does not require SAME ORIGIN。

也许只有我一个人，但location = 'http://www.example.com' 似乎超级易读。虽然，作为特例。这是向后兼容的，在可预见的将来will remain compatible。

如果 window.location 是一个对象，给它分配一个字符串会用一个字符串覆盖它。实际上 window.location 是一个具有 getter 和 setter 方法的属性。设置它时，需要一个字符串，并且设置器会更新全局 Location 对象。获取时，返回全局 Location 对象。

【参考方案3】：

正如已经说过的，location 是一个对象。 但是那个人建议使用任何一个。 但是，你最好使用.href 版本。

对象具有默认属性，如果未指定其他属性，则假定它们。对于location 对象，它有一个名为.href 的属性。并且通过在分配期间不指定任何属性，默认情况下它将假定为“href”。

这一切都很好，直到后来的对象模型版本发生变化并且不再有默认属性，或者默认属性被更改。然后你的程序意外中断。

如果你的意思是href，你应该指定href。

【讨论】：

很好的解释，在可读性或维护方面比一般的 cmets 更好。实际上，在这种特殊情况下，对象模型不会改变，因为一半的网络会停止 - 因此使用任何一个......哪个都没关系

这听起来不错，但不是真的。一般来说，DOM 或 JavaScript 中没有默认属性的概念。将字符串分配给location 是可行的，因为该属性被定义为在 JavaScript 1.0 中具有这种特殊的分配行为，并且此后的每个浏览器都实现了这一点。 html5 现在需要它。因此，虽然分配给 .href 可能更漂亮或更一致，但这样做并没有向后或向前的兼容性优势。

window.location = url 更漂亮

location = url 更可爱

"location.href = url 在技术上更正确" 不，不是。大多数情况下，它更像 像 Javascript 的其余部分。但事实上Location 是一个定义明确的对象，围绕它的规范很清晰，并且在所有方面都一致地实施。所以location = url 同样正确。但更短。因此，恕我直言，在我们不断寻求尽可能多地减少页面开销的过程中，应该首选。

【参考方案4】：

几年前，location 在 IE 中对我不起作用，而 location.href 对我起作用（并且都在其他浏览器中起作用）。从那以后，我一直只使用location.href，再也没有遇到过麻烦。我不记得那是哪个版本的 IE。

【讨论】：

可能是 IE 的一个版本做错了，而其他所有浏览器都做对了。 ;-)

in strict mode chrome 如果你也尝试直接分配给location 也会抛出异常，所以我总是使用location.href

“一个”版本的 IE？

@Shawn D. 浏览器做事正确吗？什么时候发生的！ :D

@Lpc_dark 每个*

【参考方案5】：

但要记住一个区别。

假设您想使用当前 URL 构建一些 URL。下面的代码实际上会重定向你，因为它不是调用String.replace，而是Location.replace：

nextUrl = window.location.replace('/step1', '/step2');

以下代码有效：

// cast to string
nextUrl = (window.location+'').replace('/step1', '/step2');

// href property
nextUrl = window.location.href.replace('/step1', '/step2');

【参考方案6】：

澄清一下，你不能做location.split('#')，location 是一个对象，而不是一个字符串。但是你可以使用location.href.split('#');，因为location.href 是一个字符串。

【讨论】：

您的评论是正确的，但您说的是获取位置对象的 href 属性，一个字符串。所有其他讨论都在处理 assigning 一个值，而不是读取该值。但你的观点是正确的。区别在于 href 是一个字符串，而 location 是一个对象。

【参考方案7】：

使用 TypeScript 使用 window.location.href，因为 window.location 在技术上是一个包含以下内容的对象：

Properties
hash 
host 
hostname
href    <--- you need this
pathname (relative to the host)
port 
protocol 
search 

设置window.location 会产生类型错误，而 window.location.href 是字符串类型。

Source

【参考方案8】：

改用global.location.href，同时使用React。