[javascript] "변경사항이 저장되지 않을 수 있습니다" 경고창 안나오게 하기 (onbeforeunload)

서문

사이트에서 무언가 작업을 하거나, 작성을 하다가 페이지를 벗어나려 할 때, "페이지를 벗어나시겠습니까? 변경사항이 저장되지 않을 수 있습니다"라는 경고창을 보신 분들 꽤 많을 것입니다.

 

경고창

 

이 경고창이 필요할 때 제때 잘 나와주면 실수로 페이지 벗어나는 것도 방지되고 좋지만, 메인페이지나, 정보를 수정하고 저장버튼을 눌렀을 때 저런 메시지가 나온다면 헷갈릴 수 있겠죠. 내가 수정한 정보들이 저장되지 않는다는 뜻처럼 보이니까요.

 

이럴 때 onbeforeunload 이벤트를 사용하여 메시지를 나오지 않게 처리한다거나, 혹은 해당 메시지를 출력하게 설정할 수 있습니다.

 

---

본문

반응형

 

 

onbeforeunload 이벤트?

 

onbeforeunload 이벤트는 보통 페이지를 벗어날 때 발생하는 이벤트입니다.

예를 들어 새로고침이나 뒤로 가기, 브라우저 창을 닫거나, submit(로그인, 수정하기 버튼)등을 클릭하여 페이지가 이동되거나 변경될 때 발생하는 이벤트입니다.

 

$(document).ready(function(){ 
    window.onbeforeunload = function(){
        doExit();
    };
});

function doExit(){
    event.returnValue = '"페이지를 벗어 나시겠습니까?"';
}

 

이전에는 보통 이런 식으로 사용하여 경고창의 메시지 변경도 가능했지만, 크롬 브라우저를 사용하는 대부분의 사용자들에게는 해당 경고창의 메시지는 변경이 불가능하고, 기존 문구대로 경고창을 띄우는 것은 가능합니다.

 

해당 부분을 활용하여 페이지를 벗어나려고 할 경우 특정 이벤트를 실행시키는 경우도 가능합니다.

 

 

onbeforeunload 이벤트 - 경고창을 나오게 하고 싶지 않다면?

 

window.onbeforeunload = function(){
    //초기화
};

 

의외로 어렵지 않고 간단하게 해결이 가능합니다.

위의 코드를 사용하여 특정 동작을 할 때 위의 코드를 작동하게 하면, onbeforeunload 이벤트를 초기화시켜 아무런 동작도 하지 않게 만들기 때문에, 해당 경고창이 출력되지 않습니다.

 

예를 들어 수정하기 페이지에서 onsubmit을 통해 작성되지 않은 문구를 체크하는 함수에 적용시켜 볼 수 있습니다.

 

<form method="post" action='' onsubmit="return checkform();">

<script type="text/javascript">
    function checkform(){
        window.onbeforeunload = function(){
            //초기화
        };
        
        //값 체크 처리...
    }
</script>

</form>

 

728x90

 

submit 버튼을 눌렀을 때, 해당 처리 페이지로 값을 넘겨주게 되며 그때 페이지 이동이 발생합니다. 이때 checkform() 함수가 실행이 되며, 페이지 이동 전 값들이 제대로 입력되어 있는지 체크를 하는데 checkform() 함수를 실행과 동시에  onbeforeunload 이벤트를 초기화시켜 경고 메시지를 표시하지 않게 해 줍니다.

 

---

 

결론

 

제가 수정페이지 개발을 하다가 수정하기 버튼을 눌렀는데 자꾸 "사이트에서 나가시겠습니까?" 이 경고메시지가 떠서 찾아보고 수정하는 김에 포스트 작성을 합니다.

 

저 같은 경험을 하신 분들은 얼른 고쳐서 쉽게 쓰시기 바랍니다.