history.pushstate не работает с кнопкой браузера назад и вперед

Я использую jQuery для динамической загрузки содержимого в контейнер div.

Код на стороне сервера определяет, является ли запрос AJAX или GET.

Я хочу, чтобы кнопки браузера назад/вперед работали с кодом, поэтому я пытаюсь использовать history.pushState. У меня есть следующий фрагмент кода:

$('.ajax').on('click', function(e) {
    e.preventDefault();
    $this = $(this);
    $('#ajaxContent').fadeOut(function() {
        $('.pageLoad').show();
        $('#ajaxContent').html('');
        $('#ajaxContent').load($this.attr('href'), function() {
            window.history.pushState(null,"", $this.attr('href'));
            $('.pageLoad').hide();
            $('#ajaxContent').fadeIn();
        });
    });
});

Все работает нормально, за исключением того, что при просмотре с помощью кнопки браузера «назад / вперед» адрес в строке меняется в соответствии с планом, но страница не меняется. Что я делаю неправильно?

Обновлен скрипт с помощью ответа Клейтона

var fnLoadPage = function(url) {
    $('#ajaxContent').fadeOut(function() {
        $('.pageLoad').show();
        $('#ajaxContent').html('').load(url, function() {
            $('.pageLoad').hide();
            $('#ajaxContent').fadeIn();
        });
     });
};

window.onpopstate = function(e) {
     fnLoadPage.call(undefined, document.location.href);
};

$(document).on('click', '.ajax', function(e) {
    $this = $(this);
    e.preventDefault();
    window.history.pushState({state: new Date().getTime()}, '', $this.attr('href'));
    fnLoadPage.call(undefined, $this.attr('href'));
});

javascript jquery pushstate browser-history
person Barry127    schedule 30.03.2014    source источник

Ответы (1)


arrow_upward
16
arrow_downward

@Barry_127, посмотрите, сработает ли это для вас: http://jsfiddle.net/SX4Qh/

$(document).ready(function(){
    window.onpopstate =  function(event) {
        alert('popstate fired');
        $('#ajaxContent').fadeOut(function() {
            $('.pageLoad').show();
            $('#ajaxContent').html('')
                             .load($(this).attr('href'), function() {
                                $('.pageLoad').hide();
                                $('#ajaxContent').fadeIn();
                             });
        });
    };

    $('.ajax').on('click', function(event) {
        event.preventDefault();
        alert('pushstate fired');
        window.history.pushState({state:'new'},'', $(this).attr('href'));
    });

 });

Если вы посмотрите на скрипку, которую я предоставил, и нажмете кнопку, появится предупреждение, показывающее, что вы нажимаете новое состояние. Если вы затем продолжите нажимать кнопку «Назад» после запуска состояния push, вы увидите, что предыдущая страница (или popstate) сработает.

person Clayton    schedule 02.04.2014
comment
Большое спасибо, Клейтон! Ваш пример очень показателен, теперь все имеет смысл. Я обновлю свой вопрос, чтобы показать, как выглядит мой окончательный код. - person Barry127; 03.04.2014