[Javascript] 뒤로가기를 통해 페이지로 돌아왔을 때 함수 실행하기

뒤로 가기를 통해 페이지로 돌아왔을 때 함수 실행하기

페이지에서 다른 특정 페이지로 이동한 후 다시 오리진 페이지로 돌아왔을 때 어떤 함수가 실행되어야 하는 경우가 있습니다.

저의 경우를 예를 들어 아래와 같은 상황을 상정할 수도 있습니다.

• 이벤트 페이지가 있음
• 이벤트 페이지 첫 로드 시 사용자의 이벤트 참여 상태를 가져오는 함수가 있음
• 이벤트 페이지에는 타겟 페이지로 점프시키는 링크가 있음
• 타겟 페이지 방문 후 이벤트 페이지로 돌아옴
• 이벤트 페이지에서 자동으로 참여 상태를 업데이트 해주어야 함

이럴 때 popstate 이벤트 리스너를 사용할 수 있습니다.

//뒤로가기를 통해 페이지로 돌아왔을 때 함수 호출
window.addEventListener('popstate', function(event) {
    callSomeFunction();
});

//페이지가 처음 로드됐을 때 함수 호출
callSomeFunction();

 

 

이렇게 하니 뒤로 가기를 통해 화면으로 돌아왔을 때 페이지를 새로고침 하지 않아도 이벤트 참여 상태를 업데이트 할 수 있었습니다.

 

감사합니다!