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

javascript 새로고침 페이지 나가기 실행 전에 알림 띄우기

자바스크립트를 이용한 새로고침 방지

자바스크립트를 이용해 페이지 내 정보가 변경된 경우 저장하기 전까진 현재 정보는 온전히 페이지에만 존재하게 된다. 이럴 때 잘못으로 새로고침이나 뒤로 가기라도 누르면 자료는 순식간에 날아가버린다. 이런 사고를 미연에 방지하기 위해서 자바스크립트를 이용해서 새로고침, 페이지 나가기를 막는 방법이 있다.

코드

아래의 코드를 스크립트 태그내에 작성해 주면 해당 페이지에서 리프레시, 뒤로 가기 등의 방법으로 페이지를 벗어날 때 알림 창이 뜬다.

<script>
    window.addEventListener('beforeunload', (event)=>{
            event.preventDefault();
            event.returnValue = '';
        })
</script>

다음 글

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