在使用 onPopState 和 pushState 时，我应该使用什么 js 来处理后退按钮的点击

Question

我正在使用 pushState 更改网站的网址：

history.pushState("", "info", "/info");

这很好用，但现在后退按钮不起作用。我相信我需要使用 onPopState 编写自己的后退和前进按钮行为，该行为通过历史堆栈并呈现适当的页面。诀窍是，当“后退”为空时，它应该执行后退按钮通常会做的事情（在用户进入我的网站之前“返回”到页面）。

这似乎是非常标准的行为，是否有我可以使用的配方/一些标准代码？

Answer 1

啊，我想出了一个解决方案，没有我想象的那么难（基本上它只是使用 url 路径名来呈现正确的东西）：

// Makes the back button work
window.onpopstate = function(event) {
    if (document.location.pathname == '/main') {
        $("#main").show();
        $("#info").hide();
        $("#settings").hide();
    }
    if (document.location.pathname == '/info') {
        alert('info');
        $("#main").hide();
        $("#info").show();
        $("#settings").hide();
    }
    if (document.location.pathname == '/settings') {
        alert('settings');
        $("#main").hide();
        $("#info").hide();
        $("#settings").show();
    }
};