История HTML 5 - window.pushState не работает - PullRequest
Новая
       3

История HTML 5 - window.pushState не работает

1 голос
/ 13 сентября 2011

Я пытаюсь ajax загрузить контент центра и обновить URL без изменения страницы.Это все работает нормально, кроме тех пор, пока я не попытаюсь получить доступ к истории.Кажется, window.pushState неправильно записывает мой URL или событие popstate не работает должным образом.Я могу успешно ajax загрузить предыдущую страницу, но если я нажму несколько раз назад, она останется на той же странице.Любая помощь будет принята с благодарностью! 

$(document).ready(function() {
    $('area, .ajax_link').live('click', function(event) {
        change_image(this, event);
    });

    window.addEventListener('popstate', function(event) {
        change_image(window.location, event);
    });
});

function change_image(e, event) {
    if($(e).attr('target') != '_blank') {
        event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );
        history.pushState(null, null, this_url);
        update_links(this_url);
      }
}

Ответы [ 3 ]

3 голосов
/ 13 сентября 2011

Проблема решена

@ Оливер Найтингейл: Мне нужно было удалить history.pushState из моей функции change_image. Вы не можете вызвать history.pushState во время onpopstate. Вот весь рабочий код. Я сократил это выше только для того, чтобы включить необходимые части, о которых идет речь. Я буду добавлять некоторые запасные варианты в следующем. Это проверено и работает в Chrome & Firefox. Проверено и не работает в IE. 

$(document).ready(function() {
  $('area, .ajax_link').live('click', function(event) {
      history.pushState(null, null, $(this).attr('href'));
      change_image(this, event);
  });

  window.addEventListener('popstate', function(event) {
      change_image(window.location, event);
  });
});

function change_image(e, event) {
    if(!e instanceof jQuery) {
    var this_url = e;
    }
    else {
        var this_url = $(e).attr('href');
    }

    if($(e).attr('target') != '_blank') {
    event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );

        update_links(this_url);
    }
}
0 голосов
/ 13 сентября 2011

Как $(e).attr('target') != '_blank', когда e равно window.location?

Поскольку вы используете собственный API истории HTML5, вам также нужно будет проверить до history.pushState(null, null, this_url); проверку, чтобы вызвать ее только в том случае, если мы по ссылке.

Плюс window.addEventListener('popstate', function(event) { переменная event на самом деле это данные состояния.

См. Следующие списки рабочих примеров:

0 голосов
/ 13 сентября 2011

Основная часть функции change_image происходит на сервере?Если это так, похоже, что вы выдвигаете новое состояние каждый раз, когда всплываете состояние, это может вызвать некоторые проблемы.

Если вы используете pushState для маршрутизации, вы можете попробовать использовать библиотеку, такую ​​как Davis чтобы все упростить.

...