window.location.href、window.location.replace 和 window.location.assign 的区别答案

【问题标题】：Difference between window.location.href, window.location.replace and window.location.assignwindow.location.href、window.location.replace 和 window.location.assign 的区别
【发布时间】：2011-12-03 23:00:22
【问题描述】：

有什么区别

window.location.href="http://example.com";
window.location.replace("http://example.com");
window.location.assign("http://example.com");

我在许多论坛上看到window.location.assign() 只是替换了当前会话历史记录，因此浏览器的后退按钮将不起作用。但是，我无法重现这一点。

function fnSetVariable() {
    //window.location.href = "http://example.com";
    window.location.replace("http://example.com");
    //window.location.assign("http://example.com");
}

<a onmouseover="fnSetVariable();" 
   href="PageCachingByParam.aspx?id=12" >
   CLICK 
</a>

【问题讨论】：

你可以在url中看到一个较旧的帖子：stackoverflow.com/questions/1865837/…希望对你有帮助
这里有一个更好的解释：stackoverflow.com/a/847130/96656

标签： javascript dom location

【解决方案1】：

它们做同样的事情：

window.location.assign(url);
window.location = url;
window.location.href = url;

他们只是导航到新的 URL。另一方面，replace 方法导航到 URL，而不向历史记录添加新记录。

因此，您在许多论坛上阅读的内容是不正确的。 assign 方法确实会在历史记录中添加一条新记录。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/location

【讨论】：

非常感谢您的回答。它对解决浏览器后退按钮问题帮助很大。
@blunderboy：无论如何，这是压倒性的最佳答案，所以这不会改变任何事情。
那么assign() 的意义何在？从这个答案和文档来看，它听起来与location = ... 相同。
@Mitya 恕我直言assign() 更好，为副作用调用函数更具可读性。你也可以轻松地模拟它进行测试。
我想补充一点，Quttera Labs 已将 window.location.replace 标记为可能可疑。

【解决方案2】：

关于无法使用“后退”按钮的部分是一种常见的误解。 window.location.replace(URL) 通过用新条目覆盖它，从页面历史列表中抛出 top ONE 条目，因此用户不能轻易返回该 ONE 特定网页。该功能不会清除整个页面历史列表，也不会使“后退”按钮完全失效。

（我所知道的任何函数或参数组合都不会更改或覆盖您绝对不拥有的历史列表条目 - 浏览器通常通过简单地甚至不定义任何来实现此安全限制操作可能会影响页面历史列表中除 top 之外的任何条目。如果存在这样的功能，我不禁想到恶意软件可能会做什么样的卑鄙行为。）

如果您真的想让“后退”按钮不起作用（可能不是“用户友好”：请再想一想，如果这真的是您想要做的），请“打开”一个全新的窗口。（您可以“打开”一个甚至没有“后退”按钮的弹出窗口......但是这些天弹出窗口不是很流行:-) 如果你想保持你的页面显示无论用户做什么（再次“用户友好性”是有问题的），设置一个 window.onunload 处理程序，每次从一开始就重新加载您的页面。

【讨论】：

'没有我知道的函数或参数组合可以改变或覆盖历史列表条目' ... 欢迎使用 HTML5
无法更改或覆盖您不拥有的浏览器历史记录条目是一个存在很长时间时间的安全规则。 HTML5 只是延续了这条规则。
你错过了重点或讽刺。查找 html5 和历史记录

【解决方案3】：

以上答案清楚地说明了location.replace 和location.href 之间的区别。不过，我想补充一点我在使用 React 时遇到的 location.assign 和 location.href 的显着差异。

在 React 中分析以下 sn-p：

return (<>location.href = "www://example.com"</>)

对比

return (<>location.assign("www://example.com")</>)

在前一种情况下，您实际上会看到字符串 www://example.com 在 DOM 上输入了一瞬间，因为它会在重定向发生之前呈现文本。

为了避免这种情况我们需要使用后者location.assign()

【讨论】：