자바스크립트 질문있습니다.
조회수 125회
A.jsp B.jsp C.jsp
가 있습니다.
A.jsp에서 버튼을 누르면 B.jsp로 이동되는데
B.jsp에서 브라우저에 있는 새로고침이나 f5 키보드를 눌렀을때 C.jsp로 이동하는
스크립트를 작성하려합니다.
가능한가요..?
여태까지 onbeforeunload
써보고
if (document.readyState=="loading") {
location.href='http://naver.com';
}
도 써봤는데
바로 이동되는 것 뿐이라
굳굳이 새로고침과 f5키를 눌렀을때 이동되어야합니다..
2 답변
-
History API
만일 주소가 꼭
B.jsp
일 필요 없이 변경되어도 무관하다면, history.replaceState를 이용할 수 있습니다.history.replaceState({}, "", "/C.jsp");
B.jsp
에서 해당 코드가 바로 동작하도록 하면 주소가/C.jsp
로 변경되어 새로고침 시/C.jsp
로 이동하게 됩니다.performance.navigation.type
그리고 performance.navigation.type을 활용하는 방법도 있을 것 같습니다. 해당 변수의 값은 페이지에 처음 들어올 시
0
, 새로고침시1
, 뒤로가기나 앞으로가기 시2
입니다.
다만, performance.navigation.type은 deprecated 되었으므로 대신 PerformanceNavigationTiming을 사용하라고 합니다.
추후 동작하지 않게 될 수는 있겠으나, 이 글 작성하는 시점에서 크롬과 파이어폭스에서는 동작하는 것을 확인했습니다. -
document 전체에 키다운 이벤트를 걸어서 기본 작동을 중단시키고 원하는 페이지로 이동시키는 방법이 있겠네요.
document.addEventListener('keydown', e => { if (e.key === 'F5') { e.preventDefault(); location.href = 'https://example.com'; } });
하지만 이런 식의 원래 브라우저의 기능을 막는 방법은 사용자 경험을 헤치기 때문에 가급적 하지 않는게 좋습니다.
예를 들어 개발자 도구를 열면 무조건 다른 정해진 페이지로 보내도록 만들어진 어떤 블로그가 있는데, 그 블로그에서는 즐겨찾기 창(파이어폭스 한정)을 열어도 개발자 도구로 인식해서 강제로 페이지가 바뀝니다. 굉장히 불쾌하더군요.
추가 내용입니다.
위에 작성한 코드로 F5 키, 그리고 조금 변경하면 CTRL + R 정도는 막을 수 있으나 마우스 클릭으로 브라우저의 새로고침 버튼을 클릭한 것은 막을 수 없습니다.
// 이 코드는 의도대로 작동하지 않습니다 window.addEventListener('unload', e => { e.preventDefault(); location.href = 'https://example.com'; });
unload 이벤트를 활용해볼 수 있으나 unload 이벤트 핸들러에서는 페이지 강제 이동이나 새로 고침을 막는 스크립트를 브라우저에서 차단합니다. 그리고 unload는 back/forward cache와 호환되지 않는 등의 문제가 있습니다.
// 이 코드는 페이지를 벗어나기 전에 컨펌창을 띄웁니다. window.addEventListener('beforeunload', e => { e.preventDefault(); e.returnValue = ''; });
beforeunload 이벤트를 활용한다면 페이지 강제 이동은 불가능하지만 바로 위의 코드를 적용하면:
사이트를 새로고침하시겠습니까? 변경사항이 저장되지 않을 수 있습니다.
이런 메시지의 컨펌 창을 띄우는 것은 가능합니다. 그리고 unload와 비슷한 문제가 있습니다.
결론
✅ 키 입력 이벤트를 이용한 제어는 가능함.
❌ unload, beforeunload 이벤트를 이용한 제어는 불가능.따라서 원하는 기능을 완벽히 구현할 수 없음.
댓글 입력