[Javascript] 웹브라우저 뒤로가기버튼 제어하기

뒤로가기 제어하기

방법 1.

window.onpopstate = function(event) {
  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 
  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

방법 2. 

페이지 리로드하지 않고 url만 변경하기

history.pushState( state , 'title', 'url');
참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState

state = 상태 값을 나타내는 것으로 브라우저에서 앞/ 뒤로 갈 때, 넘겨줄 데이터
title = 변경할 브라우저 제목 (변경을 원하지 않으면 null) 
url = 변경할 브라우저 URL

window.onpopstate = function(event) {
	alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}

브라우저에서 뒤/앞으로 가는 버튼 클릭 시 onpopstate 이벤트가 발생한다.
이때 콜백함수에서 event.state는 pushState 함수의 인자 값이였던 state 객체가 넘어온 것이다.

방법 3. 태그에 웹브라우저 뒤로가기 / 앞으로가기 추가

//뒤로가기
window.history.back();

//앞으로가기
window.history.forward();

//특정페이지로 이동하기
window.history.go(number ex) 1,2,3,-1) // 안에 숫자를 적어넣어 특정페이지로 이동
//만약 -1 을 넣은 경우 : back()와 동일한 효과
//만약 1을 넣은경우 : forword()와 동일한 효과

방법 4. 뒤로가기 막고 모달 띄우기

 window.history.pushState(null, '', location.href);

window.onpopstate = () => {
  history.go(1);
  this.handleGoback();
};

 window.onpopstate = () => {
   history.go(1);
   this.handleGoback();
   
   //여기에 모달창 코드 
 };

이 구문은 뒤로가기 액션이 들어올때 히스토리를 한칸 앞으로 옮겨줍니다. 실질적으로 뒤로가기가 되지 않는 효과가 있습니다. 이후 모달을 닫는 로직이 들어있는 함수를 실행 시켜주었습니다.

여기서 한가지 주의 할 점은 이후 모달이 삭제되어야 한다는 점입니다. 만약 삭제 되지 않고 display:none 등으로 처리되면 뒤로가기 할때에 다시 마운트 되고 계속 히스토리 스택을 쌓으려고 하기 때문에 주의 하여야 합니다.

참고
https://jintaewoo.tistory.com/13

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

https://velog.io/@bclef25/%EC%9B%B9%EC%97%90%EC%84%9C-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0%EB%A5%BC-%EB%A7%89%EA%B3%A0-%EB%AA%A8%EB%8B%AC%EC%9D%84-%ED%81%B4%EB%A1%9C%EC%A6%88-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%EB%B0%A9%EB%B2%95

https://developer.mozilla.org/ko/docs/Web/API/WindowEventHandlers/onhashchange