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。