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

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

0 голосов
/ 27 марта 2012

Я пытаюсь реализовать функцию истории HTML5 для выполнения загрузки содержимого страницы в формате 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" на "page2".
- OK: когда я нажимаю кнопку браузера previous, браузер URL возвращается с "page2" на "page1 "
- НЕ ОК: однако, когда я нажимаю кнопку браузера previous, содержимое страницы не изменяется на прежнее для" page1 ".

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

Ответы [ 2 ]

1 голос
/ 28 марта 2012

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

0 голосов
/ 27 марта 2012 
window.onpopstate = function (e) {
    if (e.state) {
        // Work with state object here
    }
}

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

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

...