Statechange стреляет, когда я делаю push-state

Question

Я использую history.js для обработки кнопки возврата. В history.js statechange срабатывает всякий раз, когда я делаю pushstate. Зачем?

Answer 1

Согласно этому discussion on github, ожидается поведение history.js

Этот pull request утверждает, модифицировали history.js более рядный с спецификации W3C.

Answer 2

Хотел добавить, да, это ожидаемое поведение History.js. В тоже время Есть more discussions которые критикуют это поведение, так как оно не является стандартом W3C и вызывает некоторую путаницу.

Вкратце, чтобы ответить на ваш вопрос: В функции History.js pushState() есть вызов для изменения состояния в конце.

Поверхность этого решения состоит в том, что вы можете просто изменить (нажать) ваше новое состояние и позволить функции onstatechange() обрабатывать переход. Недостатком является то, что вы не можете обрабатывать исключения/или записывать их в обработчик событий onstatechange.

Я лично предпочитаю способ W3C справиться с этим, так как вы можете различать кнопку «назад/вперед» и «pushState». В History.js Сопровождающие работают на внутреннем решении флага, что позволяет изменить это поведение:

Обратите внимание, как вышеуказанные вызовы [PushState-вызовы] триггер StateChange события, если по какой-то причине вы не хотите чтобы это произошло, внутри обработчика StateChange вы можете использовать следующее:

if (History.getState().internal) { return; } 

* Эта функция в настоящее время в стадии разработки и может быть использована только с «Dev» версией History.js! Надеюсь, что это поможет некоторым другим людям в будущем :)

Answer 3

После попытки сделать это в течение дня теперь, я наконец-то нашел решения здесь: https://github.com/browserstate/history.js/issues/47#issuecomment-25750285

код чертовски прост, следующую цитату из ссылка:

Когда вы нажимаете ваше состояние

History.pushState({ 
    _index: History.getCurrentIndex(), 
    someData: ... 
}, someTitle, someUrl); 

, а затем в случае связывания

History.Adapter.bind(window, 'statechange', function() { 
    var currentIndex = History.getCurrentIndex(); 
    var internal = (History.getState().data._index == (currentIndex - 1)); 
    if (!internal) { 
     // your action 
    } 
});