浏览器“返回”按钮返回到 Javascript 的第二阶段？答案

【问题标题】：Browser 'back' button that steps back to second stage of Javascript?浏览器“返回”按钮返回到 Javascript 的第二阶段？
【发布时间】：2016-02-05 02:58:58
【问题描述】：

我遇到了一个由 nopCommerce 中的特定客户要求带来的问题。

我有一个页面 - 比如说 page1 - 它显示了一个块图像，然后您必须单击它才能进入页面的主要部分（无论我多么试图劝阻他们不要额外点击，他们都坚持- 基本上这是在进入主产品网格/类别页面之前的“魅力照”。

我有这个用于页面加载的 JavaScript：

switch(window.location.pathname) {
    case "/store/page1":
        $(".category-page").hide();
        break;
etc. (there are other functions for other things)

接着是：

    $(".landing_click").click(function () {
        $(".landing_page").hide();
        $(".category-page").show();        
    });

这一切都很好，并在单击主图像后显示产品网格（类别页面）。但是在从网格中查看单个产品（进入产品详细信息）后，单击浏览器上的后退按钮会将您返回到页面的第一阶段 1，因此您必须单击启动图像/glamour 再次拍摄以进入产品网格。

对我来说，这是合乎逻辑的，它正在按应有的方式工作，但我需要找到一种方法，以便当用户从产品中单击后退按钮时，它会返回到产品网格。像这样：

这可以用 JavaScript 实现吗？它需要使用浏览器的后退按钮而不是特定的其他按钮，尽管我也可以添加其中一个。

如果它是一个简单的网站，它会相对容易，但我受到 nopCommerce 的限制和类别页面功能的方式的限制，因此我为什么要尽可能寻找 JavaScript 答案，以便我可以简单地调整我的内容已经有了。

谢谢

【问题讨论】：

你能把状态 a 变成一个实际的单独页面吗？
我确实考虑过这一点 - 但它需要创建一个不应该有的单独视图/页面（就 nopCommerce 而言）。如果没有 JavaScript 解决方案，我可能会探索这个选项。
可能有 js 解决方案，但不确定它有多可靠，因为后退按钮是特定于浏览器的，并且往往会使用浏览器缓存中的大量内容...
使用location.hash，在这里查看答案：stackoverflow.com/questions/1844491/…
@aszahran 看起来很有希望我会看看那个谢谢 - 我以前从未使用过，所以我会看看我是否可以做到。

标签： javascript nopcommerce

【解决方案1】：

我会使用 location.hash 这样做：

switch(window.location.pathname) {
    case "/store/page1":
        if(window.location.hash == "#landing") {
            $(".landing_page").show();
            $(".category-page").hide();
        }
        else {
            $(".landing_page").hide();
            $(".category-page").show();
        }
        break;
    //The rest here
}

接着是：

$(".landing_click").click(function () {
    window.location.hash = "#category";
    $(".landing_page").hide();
    $(".category-page").show();        
});

现在，当您在产品详细信息页面中时，单击返回按钮会将您移动到 /store/page1#category 直接加载类别页面。

【讨论】：