Вот обобщенный ответ. Такой подход должен работать с одностраничными, push-state приложениями; но также и с традиционными многостраничными приложениями или их комбинациями.
History
с ее собственной позицией в стеке g3] . Ключ таков: мы можем обнаружить, когда новый записи добавляются в стек истории; и потому что это стек, мы знаем их положение в то время: они находятся наверху.
function reorient() // after a position change in the history stack
{
let state = history.state;
let direction; /* (-1, 0, 1) = (backward, reload, forward)
position of this entry vs. last entry (of ours) shown */
if( state === null ) // then this entry is new to the stack
{
const position = history.length - 1; // top of stack
direction = 1;
// (1) Stamp the entry with its own position in the stack
state = String( position );
history.replaceState( state, /*no title*/'' );
}
else // this entry was pre-existing
{
const position = Number( state );
const stateLastShown =
sessionStorage.getItem( 'stateLastShown' );
const positionLastShown = Number( stateLastShown );
direction = Math.sign( position - positionLastShown );
}
// (2) Stamp the session with the last position shown
sessionStorage.setItem( 'stateLastShown', state );
// (3) Answer the question
console.log( 'travel direction was ' + direction );
}
addEventListener( 'pageshow', reorient ); // includes initial load
addEventListener( 'popstate', reorient ); // same-page hash changes
Это решение игнорирует History
записи страниц, чуждых приложению, как будто они никогда не посещались. Направление движения рассчитывается только по отношению к последней отображаемой странице приложения, независимо от любой иностранной страницы, которая могла быть посещена между ними. Поэтому, если вы ожидаете, что пользователь будет вводить внешние записи в стек (например, см. Комментарий Atomosk), вам может потребоваться принять меры предосторожности.