Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 브라우저 '뒤로 가기' 버튼 비활성화하는 방법

웹 개발을 하다 보면 결제 완료 페이지나 인증 후 페이지처럼 사용자가 이전 페이지로 돌아가지 못하도록 해야 하는 경우가 있습니다. 이럴 때 JavaScript를 활용하면 브라우저의 뒤로 가기 버튼 동작을 사실상 무력화할 수 있습니다.

핵심 원리

뒤로 가기를 완전히 막는 것은 불가능하지만, window.history.forward() 메서드를 사용하면 사용자가 뒤로 가기를 눌렀을 때 즉시 다시 앞 페이지로 되돌려 보내는 방식으로 뒤로 가기를 비활성화한 것과 같은 효과를 낼 수 있습니다.

현재 페이지 코드 예제

아래는 뒤로 가기 버튼을 비활성화할 현재 HTML 페이지의 전체 코드입니다.

<html>
   <head>
      <title>Disable Browser Back Button</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   </head>
   
   <body>
      <a href = "newpage.html">Next Page</a>
   </body>
   <script>
      $(document).ready(function() {
         function disablePrev() { window.history.forward() }
         window.onload = disablePrev();
         window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
      });
   </script>
</html>

코드 설명

  • disablePrev() 함수는 window.history.forward()를 호출하여 히스토리에서 한 단계 앞으로 이동시킵니다. 결과적으로 뒤로 가기가 실행되자마자 다시 현재 페이지로 돌아오게 됩니다.
  • window.onload에 함수를 등록해 페이지가 로드될 때마다 해당 동작이 적용되도록 합니다.
  • window.onpageshow 이벤트에서 evt.persisted 값을 확인합니다. 이 값이 true라면 페이지가 bfcache(Back-Forward Cache)에서 복원된 것을 의미하므로, 이 경우에도 뒤로 가기 차단 로직을 다시 실행합니다.

newpage.html 코드 예제

다음은 이동 대상인 newpage.html 파일의 코드입니다.

<html>
   <body>
      Go to back page using web browser back button.
   </body>
</html>

주의사항

이 방식은 사용자 경험(UX) 측면에서 논란이 될 수 있습니다. 사용자가 의도적으로 뒤로 가기를 시도하는데 강제로 되돌려지면 혼란스러울 수 있으므로, 결제 완료, 로그아웃 후 페이지, 시험 응시 화면 등 반드시 재방문을 막아야 하는 상황에서만 신중하게 사용하는 것이 좋습니다.