popstate 이벤트가 HTML5 pushstate를 사용하여 뒤로 또는 앞으로 작업에서 오는 경우 어떻게 검색합니까?

popstate 이벤트가 HTML5 pushstate를 사용하여 뒤로 또는 앞으로 작업에서 오는 경우 어떻게 검색합니까?

---

나는 다음 또는 뒤로 작업에 따라 해당 애니메이션을 수행하는 웹 페이지를 개발 중이며 푸시 상태를 사용할 때 문제가 발생합니다. 이벤트를받을 때 사용자가 Pushstate API를 사용하여 뒤로 또는 앞으로 기록 버튼을 클릭했는지 어떻게 알 수 있습니까? 아니면 직접 구현해야합니까?

---

아주 쉽게 직접 구현해야합니다.

• 호출 할 때 pushState데이터 개체에 고유 한 증가 ID (uid)를 제공합니다.
• onpopstate핸들러가 호출 될 때 ; 마지막 상태 uid를 포함하는 영구 변수에 대해 상태 uid를 확인하십시오.
• 현재 상태 uid로 영구 변수를 업데이트합니다.
• 상태 uid가 마지막 상태 uid보다 크거나 작은 지 여부에 따라 다른 조치를 수행하십시오.

---

이 답변은 단일 페이지 푸시 상태 앱, 다중 페이지 앱 또는 둘의 조합에서 작동해야합니다. ( History.lengthMesqualito의 의견에서 해결 된 버그 를 수정했습니다 .)

작동 원리

히스토리 스택에 대한 새 항목을 쉽게들을 수 있습니다. 각 새 항목에 대해 사양 에 따라 브라우저는 다음을 수행해야합니다.

1. “현재 항목 이후 브라우징 컨텍스트의 세션 기록에서 모든 항목 제거”
2. "마지막에 새 항목 추가"

따라서 입장시 :

새 항목 위치 = 마지막으로 표시된 위치 + 1

해결책은 다음과 같습니다.

1. 각 기록 항목을 스택의 고유 한 위치로 스탬프 처리
2. 마지막으로 표시된 위치의 세션 저장소에서 추적
3. 두 가지를 비교하여 여행 방향을 찾으십시오.

예제 코드

function reorient() // After travelling in the history stack
{
    const positionLastShown = Number( // If none, then zero
      sessionStorage.getItem( 'positionLastShown' ));
    let position = history.state; // Absolute position in stack
    if( position === null ) // Meaning a new entry on the stack
    {
        position = positionLastShown + 1; // Top of stack

        // (1) Stamp the entry with its own position in the stack
        history.replaceState( position, /*no title*/'' );
    }

    // (2) Keep track of the last position shown
    sessionStorage.setItem( 'positionLastShown', String(position) );

    // (3) Discover the direction of travel by comparing the two
    const direction = Math.sign( position - positionLastShown );
    console.log( 'Travel direction is ' + direction );
      // One of backward (-1), reload (0) or forward (1)
}

addEventListener( 'pageshow', reorient );
addEventListener( 'popstate', reorient ); // Travel in same page

코드 의 라이브 사본 도 참조하십시오 .

Limitation

This solution ignores the history entries of external pages, foreign to the application, as though the user had never visited them. It calculates travel direction only in relation to the last shown application page, regardless of any external page visited in between. If you expect the user to push foreign entries onto the stack (see Atomosk’s comment), then you might need a workaround.

ReferenceURL : https://stackoverflow.com/questions/8980255/how-do-i-retrieve-if-the-popstate-event-comes-from-back-or-forward-actions-with