javascript 뒤로가기 차단 레이어 팝업 닫기 처리

window.onpopstate

같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다.

history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트리 간의 이동이 있을 때만 발생이 된다.

브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리한다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킨다. 하지만 Firefox 는 그렇지 않다.

브라우저의 백버튼이 눌려질때 실행할 자바스크립트를 결정할 수 있다.

 

history.pushState

HTML 문서에서, history.pushState() 메서드는 브라우저의 세션 기록 스택에 상태를 추가합니다.

window.history.pushState(state, title[, url]);

state
새로운 세션 기록 항목에 연결할 상태 객체. 사용자가 새로운 상태로 이동할 때마다 popstate 이벤트가 발생하는데, 이 때 이벤트 객체의 state 속성에 해당 상태의 복제본이 담겨 있습니다.
상태 객체는 직렬화 가능한 객체라면 모두 가능합니다.

title
지금은 대부분의 브라우저가 title 매개변수를 무시하지만, 미래에 쓰일 수도 있습니다. 빈 문자열을 지정하면 나중의 변경사항에도 안전할 것입니다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있습니다.

url Optional
새로운 세션 기록 항목의 URL. pushState() 호출 이후에 브라우저는 주어진 URL로 탐색하지 않습니다. 그러나 이후, 예컨대 브라우저를 재시작할 경우 탐색을 시도할 수도 있습니다. 상대 URL을 지정할 수 있으며, 이 땐 현재 URL을 기준으로 사용합니다. 새로운 URL은 현재 URL과 같은 출처를 가져야 하며, 그렇지 않을 경우 예외가 발생합니다. 지정하지 않은 경우 문서의 현재 URL을 사용합니다.

 

다음의 코드를 예시로 보겠습니다.

window.history.pushState(null, '', location.href);
window.onpopstate = () => {
  history.go(1);
  this.handleGoback();
};

우선 history stack을 쌓습니다.

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

첫번째 인자로 null을 넣습니다.

title은 따로 넣지 않았습니다. 스트링 형태로 들어가야 합니다.

이동할 주소는 현재 주소로 선택하였습니다.

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

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

 

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