Использование onpopstate с Balupton's History.js для возврата - PullRequest
Новая
       3

Использование onpopstate с Balupton's History.js для возврата

0 голосов
/ 05 января 2012

Моя цель - сохранить текущее состояние веб-сайта, чтобы я мог вернуться в это состояние, нажав кнопку возврата браузера. В настоящее время я достиг этого, используя pushState и popState, используя собственные функции HTML5 следующим образом: 

<script type="text/javascript">
  $("a").click(function(e) {
    $("#element").load($(this).attr('href') + ' #otherElement');
    $("html, body").animate({ scrollTop: 0 }, 0);
    previous_page = location.href;
    window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
    e.preventDefault();
    return false;
  });

  window.popupstate = function(e) {
    location.reload();
  }
</script>

Этот фрагмент кода работает, как и ожидалось, в Firefox 4. Однако в Chrome страница перезагружается постоянно. Поэтому я хотел бы использовать библиотеку Balupton History.js для запуска фрагмента кода во всех браузерах, но я нашел пример на странице Балуптона не очень полезным.

Я пробовал следующее (что не работает): 

var History = window.History;
History.pushState({state:'root'},'root',$(this).attr('href'));

$("a").click(function(e) {
  $("#element").load($(this).attr('href') + ' #otherElement');
  $("html, body").animate({ scrollTop: 0 }, 0);
  History.pushState({state:$(this).attr('href')},$(this).attr('href'),$(this).attr('href'));
  return false;
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log('statechange:', State.data, State.title, State.url);
    if (State.title == 'root') {
        History.back();
        location.reload();
    }
});

Спасибо.

1 Ответ

1 голос
/ 06 января 2012

Я нашел рабочее решение для моей проблемы.Поскольку я теряю привязки при замене всего пути DOM, мне нужно просто скрыть / показать элементы следующим образом: 

var History = window.History;

$("a").live('click', function(e) {
    if ($(this).attr('href').startsWith('corpus-')) {
        $("#element").hide();
        $("#newElement").load($(this).attr('href') + ' #otherElement');
        $("html, body").animate({ scrollTop: 0 }, 0);
        History.pushState({state:$(this).attr('href')},$(this).attr('href'),$(this).attr('href'));
        return false;
    }
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();
    History.log('statechange:', State.data, State.title, State.url);
    $("#element").toggle();
    $("#newElement").toggle();
});

Решение пока не совсем идеальное.

...