5

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

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

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

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

4

5 回答 5

2

啊，我想出了一个解决方案，并没有我想象的那么难（基本上它只是使用 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();
    }
};
于 2011-01-12T00:35:12.867 回答
1

没有框架，它只是：

window.onpopstate = function(event){
   // do something
}
于 2013-05-05T05:24:00.647 回答
1

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

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

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

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

所以现在试试这个：

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

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

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

于 2013-07-07T13:46:34.753 回答
0

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

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

于 2011-02-04T13:13:17.673 回答
0

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

于 2011-01-30T13:54:37.763 回答