History.js onpopstate?

Question

Я пытаюсь реализовать History.js после обучения использованию History API. Однако мое popstate больше не работает.

Что используется в History.js как onpopstate? В истории API вы используете onpopstate с event.state.

Что мне нужно знать, так это то, что используется в History.js. Это window.onstatechange и что он возвращает?

Answer 1

Вы не можете сказать, что это от толчка или хлопка.Это по своей конструкции.Вы не должны ничего делать до события push.Вместо этого вы должны передать все необходимые данные первому параметру.

History.pushState(data,title,url)

Затем извлечь данные из onstatechange и выполнить некоторые действия.

Проверьте это: https://github.com/browserstate/history.js/issues/47

Answer 2

Базовый пример говорит:

History.Adapter.bind(window,'statechange',function(){ // code });

И этот гист (для jQuery) использует:

$(window).bind('statechange',function(){ // code });

Answer 3

Вы должны использовать событие window.statechange, которое было изобретено History.js, поскольку window.popstate является слишком общим.Вы реагируете на него, привязывая к нему обработчик событий, обычно так:

History.Adapter.bind(window, 'statechange', function () {
    var state = History.getState();
    // Your code goes here
});

Или вы можете использовать абстракцию маршрутизатора, что должно быть проще.Я написал один, например, под названием StateRouter.js .Несколько простых примеров кода:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();
// Navigate to the page of person 1
router.navigate('/persons/1');

У меня также есть скрипка для демонстрационных целей .

Answer 4

Попробуйте добавить в тело тега следующие два события:

1. onpopstate="(your code)" -> для браузеров html5
2. onhashchange="(your code)" -> для браузеров html4

Если у вас возникли проблемы, например, дважды запустить код, попробуйте создать функцию, которая спрашивает, готов ли pushState, и использовать onpopstate.Если нет, в другом случае используйте onhashchange.