Question

之间有什么区别

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>

Answer 1

这些做同样的事情：

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

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

所以，你用这么多形式阅读的内容是不正确的。 assign方法会在历史记录中添加新记录。

参考：http://developer.mozilla.org/en/window.location

Answer 2

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

（我知道的NO函数或参数组合都不能更改或覆盖你绝对不会拥有的历史列表条目 - 浏览器通常只是通过简单地定义任何内容来阻止这种安全限制操作可能会影响页面历史记录列表中 top 之外的任何条目。我不禁想到，如果存在这样的函数，恶意软件可能会做些什么卑鄙的事情。）

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

Answer 3

以上答案清楚地表明了 location.replace 和 location.href 之间的区别。但是，我想补充一个我在 React 中工作时在 location.assign 和 location.href 的使用方面遇到的显着差异。

在 React 中分析以下代码片段：

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

对比

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

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

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

window.location.href，window.location.replace和window.location.assign之间的区别

3 个答案: