HTML5历史API后退按钮

Question

我正在使用ajax调用来更新我的页面的一部分，它用于搜索功能。当我进行搜索时，我会更新网址。示例：mysite.com/products成为mysite.com/products?search=blabla

但是当我按下后退按钮时，只会更改网址而不是页面内容。

这是我用来设置历史记录的功能：

function setHistory(data, url) {
    var search = $("#Search").val();
    url = url.replace('search_input', search);
    history.pushState(data, "", url);
}

data是页面上更改的内容，url是推送到历史记录的新网址。有什么我做错了吗？如果我使用后退按钮，页面是否应该自动更新？它不适用于chrome或IE 10。

Answer 1

您需要收听popstate事件并更改回页。

addEventListener('popstate', function (event) {
    event.state; // this contains the state data from `pustState`. Use it to decide what to change the page back to.
}

另见MDN。