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();
    }
};

Answer 2

没有框架就是：

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

Answer 3

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

这个主题的文档似乎很模糊。我读过的内容表明你可以在状态参数中输入一个空字符串（或空对象）（正如你在你的例子中所做的那样）。

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

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

所以现在试试这个：

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

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

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

Answer 4

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

Answer 5

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

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

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

5 个答案: