JS 페이지 이동 & 뒤로 가기 막기

uoayop·2021년 4월 11일
0

JavaScript

목록 보기
20/24

토이 프로젝트라고 하기도 민망한 작은.. 뭔가를 하고있다.
vue나 react를 쓰지 않고, 바닐라JS로만 사이트를 만들고 있다.
프레임워크나 라이브러리에 의존하지 않고.. 기초에 .. 충실하기.. 😎

버튼을 클릭해서 페이지를 넘어가고, 최종적으로 결과를 보여주는 페이지를 표시해야 한다.
근데 [뒤로 가기]가 활성화 되어 있어서, 뜬금없이 결과 화면으로 넘어가곤 한다.

모든 화면에서 뒤로 가기 를 비활성화 처리해줄 것이다.


우선 버튼이 클릭되면, 페이지가 넘어가도록 onclick 속성을 추가해주었다.

// index.html
<input 
    type="button" 
    onclick="BtnClick('index.html');" 
    value="시작하기"/>
// pagelink.js
function BtnClick(link){   
   location.replace(link);
}

  • location.replace
    기존 페이지를 새로운 페이지로 변경하는 함수.
    현재 URL을 지정된 URL로 바꾸기 때문에 이전 페이지로 이동이 불가능하다.

  • location.assign
    이전 페이지 히스토리를 저장하고 있기에 이전 페이지로 이동이 가능하다.

  • location.forward
    다음 페이지로 이동.


뒤로 가기를 시도하면 강제로 이동하지못하도록 처리해줄 것이다.

// pagelink.js
function noBack(){window.history.forward();}

뒤로 가기를 눌렀을 때, 뒤로 가지 말아야 할 페이지에 아래와 같이 코드 처리를 해주면 된다.

// index.html
<body 
    onload="noBack();" 
    onpageshow="if(event.persisted) noBack();" 
    onunload="">

[결과] 뒤로 가기를 눌러도 이전 페이지로 이동하지 않는다.


페이지 이동 : javascript (자바스크립트)
[JavaScript] 뒤로가기 버튼 막기

profile
slow and steady wins the race 🐢

0개의 댓글