토이 프로젝트라고 하기도 민망한 작은.. 뭔가를 하고있다.
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="">[결과] 뒤로 가기를 눌러도 이전 페이지로 이동하지 않는다.
slow and steady wins the race 🐢