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

【问题标题】：What js should I use to handle back button clicks while using onPopState and pushState使用 onPopState 和 pushState 时我应该使用什么 js 来处理后退按钮点击
【发布时间】：2011-06-07 12:51:33
【问题描述】：

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

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

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

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

【问题讨论】：

您如何处理您的yourdomain.com/info 的直接输入？这工作正常吗？

标签： javascript html back-button pushstate

【解决方案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();
    }
};

【讨论】：

虽然这样可以，但是我觉得如果在原来的pushState()函数中进入非空状态就没有必要了。 history.pushState({state:"dummy state"}, "info", "/info");

【解决方案2】：

没有框架，它只是：

window.onpopstate = function(event){
   // do something
}

【讨论】：

【解决方案3】：

我自己也遇到过这个问题，我想我发现了它为什么不起作用。

有关此主题的文档似乎非常含糊。我读过的那句话说您可以在状态参数中输入一个空字符串（或空对象）（就像您在示例中所做的那样）。

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

当我这样做时（在 Chrome 和 Firefox 中进行测试），“后退”和“前进”按钮确实有效，因为它们会更改浏览器地址栏中的链接。然而，这就是他们所做的一切——与该链接关联的页面没有加载！

所以现在试试这个：

history.pushState({state: dummyState}, "info", "/info");

现在，“后退”和“前进”按钮似乎可以正常工作了。就好像浏览器说“如果没有'状态'可以锁定，那么我就不会费心加载页面”。

鉴于它在 Firefox 和 Chrome 中的工作方式相同，我猜这是一个记录在案的功能。但如果是的话，它被埋得比我想去的还要深。

【讨论】：

【解决方案4】：

奇怪的是后退按钮不适合你。我正在使用History.js，它为所有非 HTML5 浏览器提供了向后兼容的体验，而且我在任何浏览器或测试套件中都没有遇到过这个问题......也许你会想试一试？

【讨论】：

【解决方案5】：

我认为你不需要自己做任何事情来实现使用 pushState 后的后退和前进按钮行为，它应该仍然像以前一样工作，但它会触发 popstate 而不是发出 http 请求等。

我正在使用Davis.js 来实现与您所拥有的类似的功能，将某些 onpopstate 事件路由到行为，检查一下。

【讨论】：