[JS] 뒤로가기 막기, 뒤로가기(이전페이지) 링크 만들기

사용자가 방문한 모든 URL을 포함하는 객체로는 history라는 JavaScript 객체가 존재합니다.

 

뒤로가기 링크 제작

history.back();
// 이전페이지로 이동

History 객체에는 사용자가 방문한 모든 URL을 스택 방식으로 쌓아놓습니다. 이를 위에 코드로 사용하면 Array.pop() 같은 효과가 나오게 됩니다.

 

history.go(-1)
// 이전페이지로 이동

history.go(-2)
// 이번페이지 -2번 클릭한 것과 동일한 동작

가장 뒤에 있는 URL을 빼는 메서드가 존재한다면, 특정 URL을 지정하는 메서드도 존재합니다. history.go() 메서드는 인자로 전달하는 수만큼 페이지를 이동합니다.

 

뒤로가기 막기

// 스택 추가
history.pushState(null, null, location.href); 

// 뒤로라기 이벤트감지 -> 현재페이지로 이동
window.onpopstate = function() { 
	history.go(1); 
}

히스토리 스택에 현재 페이지의 URL을 추가한 뒤, 뒤로가기를 할 경우 현재 페이지로 이동시켜서 뒤로가기를 막는 방법입니다.

 

예제코드

<button id="back">뒤로가기</button>
<button id="stop">뒤로가기 막기</button>

document.querySelector('#back').onclick = function() {
  history.back();
}

document.querySelector('#stop').onclick = function() {
  history.pushState(null, null, location.href); 
  window.onpopstate = function(event) { 
	history.go(1); 
  };
}