javascript onbeforeunload 오작동 / 버그

2017. 6. 29. 11:30language/javascript

javascript onbeforeunload 오작동 / 버그

 

 

 

onbeforeunload 이벤트의 오작동 ? 버그 ? 라고 해야하나...

 

내가 원하지 않을때 발생되는 현상이 있어서 살펴보았다.

 

 

 

상황은 다음과 같다.

 

onbeforeunload 를 이용해서 페이지를 새로고침, 닫기 등 페이지 이동 또는 변경될 경우 특정 메시지를 보여주거나 특정 작업을 하려고 했다.

 

그런데 페이지 이동이 아닌 특정 버튼클릭만으로 onbeforeunload 이벤트가 실행되었다.

 



 

 

위 상황을 재현하기 위해 간단한 소스를 준비했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<script>
function testFunction(){
    alert("test function");
}
 
window.onbeforeunload = function(e){
    if(e != null && e != undefined){
        alert("페이지 이동 전");
    }
};
</script>
 <BODY>
  <a href="javascript:testFunction();">a 버튼</a>
 </BODY>
</HTML>
cs

4# : 평범한 함수

8# : onbeforeunload 이벤트

15# : a태그

 

 

조금 특이한 점은 버튼 태그를 사용하지 않고 a 태그를 버튼처럼 사용했다.

href 속성에 javascript: 라고 prepix를 사용해서 javascript 의 함수를 호출하도록 하였다.

 

 

테스트 브라우저 : IE 9, 10, 11

 

 

IE9

IE10

IE11

 onbeforeunload

O

O

X

 

결과는 페이지 이동을 하지 않았는데도 불구하고 IE11을 제외한 IE9, 10에서 onbeforeunload 가 실행되었다.

 

내가 기대한 결과는 모두 실행되지 않아야 했다.

 

 

IE9, 10 버전은 href(hypertext reference) 의 속성이 실행되는 것 역시 페이지의 이동(변화) 라고 판단하는 듯 하여 onbeforeunload 이벤트를 발생시키는 듯 하다.

 

 

이번에는 다음과 같이 href속성을 사용하지 않고 onclick 이벤트를 사용해 보았다.

1
  <a href="#" onclick="testFunction();">a 버튼</a>
cs

 

 

IE9

IE10

IE11

 onbeforeunload

X

X

X

 

기대한 대로 IE9, 10, 11버전 모두 onbeforeunload 이벤트가 발생되지 않았다.

 

앞으로 a 태그를 활용한 버튼을 사용할 경우에는 onclick 이벤트를 활용하는것으로 통일해야 할 듯 하다.

 



 

구글링 하다 보니 다음과 같은 소스로 해결하는 사람들도 볼 수 있었다.

1
2
3
4
5
6
7
8
$(document).ready( function() {
    $(window).data('beforeunload',window.onbeforeunload);
 
    $('a[href^="javascript:"]').hover( 
        function(){window.onbeforeunload=null;},
        function(){window.onbeforeunload=$(window).data('beforeunload');}
    );
});
cs

1# : document ready 이벤트

2# : onbeforeunload 이벤트를 window에 저장해둠

4# : a 태그 중 href 속성에서 javascript 를 사용하는 태그의 마우스 오버 이벤트 설정

5# : 마우스가 오버되면 onbeforeunload 이벤트를 없앰

6# : 마우스가 아웃되면 저장했던 onbeforeunload 이벤트를 다시 연결함

 

 

a 태그에서 href 속성으로 javascript 를 사용할 땐 주의해서 사용할 필요가 있어 보인다.