Повторное использование состояния истории HTML при нажатии браузера на предыдущие/следующие кнопки

Question

Я пытаюсь реализовать HTML5history feature для выполнения загрузки содержимого страницы AJAX. До сих пор мой JS выглядит следующим образом:

// saving current page to history 
var current_url = "page1"  
var page_content1 = $('body').html(); 
history.pushState({page_content: page_content}, current_url, current_url); 

// loading new page with AJAX 
var new_url="page2" 
$.getJSON(new_url,get_data,function(data){ 
    $('body').html(data.page_content); 

    var page_content2 = $('body').html(); 
    history.pushState({page_content: page_content2}, new_url, new_url); 
}); 

- OK: когда JS выполняется содержание «page2» правильно загружена с помощью AJAX в body и браузер URL изменяется от «page1» в "страница 2".
- OK: при нажатии на кнопку previous браузера, браузер URL изменяется обратно от «page2» до «page1»
- NOT OK: однако при нажатии кнопки previous браузера, содержимое страницы является не изменилось на то, что раньше было для «page1».

В: Какие события следует привязать к предыдущим/последующим кнопкам браузера, и какой метод history следует использовать для извлечения данных состояния после нажатия этих кнопок?

Answer 1

Я закончил с использованием history.js которая опирается на событии window'statechange' для обработки взаимодействий с браузером previous/next кнопки и метода getState() для получения данных о состоянии.

Answer 2

window.onpopstate = function (e) { 
    if (e.state) { 
     // Work with state object here 
    } 
} 

Обратите внимание, что если вы хотите начальную страницу пользователь посещает правильно нагрузить при плавании назад к нему, вы должны будете использовать history.replaceState() во время начальной загрузки страницы, чтобы загрузить состояние для этого стр.

Также обратите внимание, что для этого уже существует несколько плагинов jQuery. Некоторые из них даже пытаются поддерживать IE (используя iframe). Прежде чем изобретать это самостоятельно, вы можете попробовать некоторые из существующих решений.