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是要推送到历史记录的新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 。