Javascript - 어떻게 페이지에 들어왔는지 구분(새로고침, 뒤로가기 등)

자바스크립트로 사용자가 페이지에 어떤 방식으로 접근했는지 알 수 있다.

 

iOS 네이버 인앱 브라우저에서 window.location.replace()로 이동시 히스토리가 남는 이슈가 있어 수정 방법을 찾아보다가 발견하게 되었다.

 

---

 

pageshow 이벤트로 구분

pageshow 이벤트는 페이지 진입 후 로드가 완료된 후에 발생하는 이벤트이다.

 

load, DOMContentLoaded 이벤트와 유사하지만, BFCache에서 복원된 페이지에 진입 시에도 동작하기 때문에 앱스킴 호출이나 로깅 등 페이지 진입시마다 반드시 실행되어야 할 동작들을 처리할 때 유용하다.

 

참고로 호출되는 순서는 DOMContentLoaded -> load -> pageshow 순이다.

 

이벤트 객체의 persisted 값이 true인 경우는 뒤로가기로 진입, false는 그 외로 구분할 수 있다.

window.addEventListener('pageshow', (e) => {
	// 뒤로가기로 페이지 들어온 경우 실행
    if (e.persisted) {
      // ...
    }
    // 그 외, 여러 번 실행될 수 있음
    else {
      // ...
    }
});

 

 

참고로 pageshow 이벤트는 여러 번 실행될 수 있기 때문에, 뒤로가기시 동작해야 할 코드를 작성할 때만 사용하는 것이 좋다.

ex) 뒤로가기로 진입했을 때 persisted = false로 최초 실행 -> 그 후 persisted = true로 재실행

 

pageshow에서는 새로고침 여부까지는 판별할 수 없기 때문에 새로고침 여부도 알아야 한다면 아래 방법을 사용하자.

 

 

window.performance의 navigation 값으로 구분

아래 코드처럼 performance API에서 제공하는 PerformanceNavigationTiming 객체를 이용하여 새로고침/뒤로가기로 접근했는지 구분할 수 있다.

const navigation = performance.getEntriesByType('navigation')[0];

// 뒤로가기로 페이지 접근시 실행
if (navigation?.type === 'back_forward') {
	// ...
}

// 새로고침으로 페이지 접근시 실행
if (navigation?.type === 'reload') {
	// ...
}

// 일반적인 방법으로 페이지 접근시 실행
if (navigation?.type === 'navigate') {
	// ...
}

 

각각의 타입이 의미하는 값은 다음과 같다.

값	설명
navigate	링크(a 태그), 북마크, form 제출, 스크립트 혹은 주소창에 URL을 입력하여 접근한 경우
reload	새로고침 버튼 혹은 location.reload() 함수로 페이지 접근한 경우 혹은 BFCache에서 복원된 페이지 진입한 경우
back_forward	히스토리 혹은 뒤로가기/앞으로 가기로 페이지 접근한 경우
prerender	사전 렌더링된 페이지 접근한 경우

 

 

performance.getEntriesByType('navigation')과 비슷한 코드로 직접 performance.navigation.type 값에 접근할 수도 있다.

const navigation = performance.navigation.type;

// 새로고침으로 페이지 접근시 실행
if (navigation.type === 1) {
	// ...
}

// 뒤로가기로 페이지 접근시 실행
if (navigation.type === 2) {
	// ...
}

// 일반적인 방법으로 페이지 접근시 실행
if (navigation.type === 0) {
	// ...
}

 

 

performance.navigation.type은 숫자를 리턴하지만 의미하는 바는 performance.getEntriesByType('navigation')와 동일하다.

값	설명
0	= navigate 링크, 북마크, 양식 제출, 스크립트를 따르거나 주소창에 URL을 입력하여 접근
1	= reload 새로고침 버튼 혹은 location.reload() 함수로 페이지 접근한 경우
2	= back_forward 히스토리 혹은 뒤로가기/앞으로 가기로 페이지 접근한 경우
255	그 외 다른 방법

 

 

참고로 performance.navigation.type은 deprecated 되었기 때문에 일부 최신 브라우저에서 지원하지 않을 수 있으므로 getEntriesByType 메소드를 사용하는 것을 권장한다.

 

 

참고 링크

PerformanceNavigationTiming: type property - Web APIs | MDN