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 。