JavsScript | 새로고침 방지된 페이지에서 정상 작업시 페이지 벗어가는 방법 (새로고침 방지 해제)

자바스크립트 새로고침방지 해제

이전 글 : 새로고침 방지

이전에 새로고침 및 페이지 나가기 방지 방법을 살펴봤다.

JavaScript | 새로고침 페이지 나가기 방지하기 (실행 전에 알림 띄우기)

이를 적용한 후 페이지 정보가 저장되기 전엔 페이지를 벗어날 수 없게 하는데 까지는 성공했다. 하지만 새로고침 방지를 해두면 정상 작업을 마친 후에 새로운 페이지로 이동할 때도 이 기능이 적용되어 바로 벗어날 수가 없는 문제가 있다. 정상 작업 후에 페이지를 자연스럽게 빠져나가기 위해서는 설정해 두었던 새로고침 방지 기능을 꺼줘야 한다.

새로고침 방지 기능 해제

새로고침 방지는 addEventListener를 이용해서 beforeunload 속성을 추가해줬다. 반대로 새로고침 방지 기능을 해제하기 위해선 이 속성을 제거해줘야 한다. 이 때 사용되는 함수는 removeEventListenter이다. 아래 코드를 보자.

<script>
    const :  listener = (event) => {
        event.preventDefault();
        event.returnValue = '';
    },
    
    banRefresh: function () {
        window.addEventListener('beforeunload', listener);
    },

    offBanRefresh: function(){
        window.removeEventListener('beforeunload', listener);
    }
</script>

 

페이지를 로드하는 단계에서 banRefresch를 실행시켜 새로고침 방지 기능을 켜두고, 성공적으로 기능을 완료했을 때는 offBanRefresh 함수를 실행시켜 설정해 두었던 새로고침 방지 기능을 종료 후 원하는 작업을 이어가면 된다.