window.location.replace(href) 后后退按钮失败；答案

【问题标题】：Back button fails after window.location.replace(href);window.location.replace(href) 后后退按钮失败；
【发布时间】：2012-08-04 09:03:21
【问题描述】：

我做了一个简单的函数，使所有容器的行为都像链接（“a”元素）。

function allHot(element){
$(element)
.click(
    function(){
    var href = $(this).find('a').attr('href');
    window.location.replace(href);
})

.hover(
    function(){
    $(this).css({'text-shadow' : '0px 1px 0px #D6D6D6'});
    },
    function(){
    $(this).css({'text-shadow' : 'none'});
    }

);
}

功能很好用。用户无需单击“更多”按钮，而是可以单击容器上的任何位置并正确重定向。

但是，如果用户在重定向后单击返回按钮，浏览器会返回两步而不是应有的一步。更奇怪的是，历史看起来还不错。

简单的方案更好的描述：

第1页->第2页

Page2 [用户点击“allHot”容器] -> allHot 重定向到 Page3

Page3 [用户点击浏览器返回按钮] -> Page1

这是我目前正在开发的网站的主要错误。我真的没有办法阻止它。在 Firefox、Chrome 和 Opera 上测试的错误。

也在 Opera“无 javascript 模式”上进行了测试。如果 javascript 被禁用，问题就不会发生。

提前感谢任何线索或解决方案。

【问题讨论】：

标签： javascript jquery firefox google-chrome opera

【解决方案1】：

不要使用replace，而是使用以下内容：

window.location.href = ''

【讨论】：

注意：如果你和我一样，发现上面提到的重定向后后退按钮仍然不起作用，请确保你使用的是完整的 url，例如http://www.example.com/endpoint。仅使用 /endpoint 仍然失败。
window.location.assign(url);为我工作，因为 Chrome 遇到 .href 问题
谢谢你。这解决了我的问题。

【解决方案2】：

添加到 MarcoK 的答案。

使用replace 时，您正在替换历史状态，因此您不会再向历史推送一个状态。

如果您有以下情况：

Page1 到 State1

Page2 到 State2

然后你使用替换你将替换Page3 到State2。

当您按下返回按钮时，您将从State2 转到State1，这就是您要转到Page1 的原因。

使用window.location.href 时，您将添加一个状态，因此Page3 将设置为State3，当您单击返回按钮时，您将转到State2，其中有Page2 作为URL。

【讨论】：

感谢您的详细解释。