자바스크립트 질문있습니다.

조회수 305회

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");
    

    History API

    B.jsp에서 해당 코드가 바로 동작하도록 하면 주소가 /C.jsp로 변경되어 새로고침 시 /C.jsp로 이동하게 됩니다.

    performance.navigation.type

    그리고 performance.navigation.type을 활용하는 방법도 있을 것 같습니다. 해당 변수의 값은 페이지에 처음 들어올 시 0, 새로고침시 1, 뒤로가기나 앞으로가기 시 2입니다.
    다만, performance.navigation.typedeprecated 되었으므로 대신 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 이벤트를 이용한 제어는 불가능.

    따라서 원하는 기능을 완벽히 구현할 수 없음.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)