2017. 6. 29. 11:30ㆍlanguage/javascript
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 를 사용할 땐 주의해서 사용할 필요가 있어 보인다.
'language > javascript' 카테고리의 다른 글
| javascript history 추가 (0) | 2019.07.11 |
|---|---|
| javascript cookie 사용하기 (0) | 2018.04.11 |
| javascript 배열 중복 제거 (0) | 2018.04.10 |
| javascript getyear 117 118 / getyear 쓰지말고 getFullYear 쓰자 (6) | 2018.01.10 |
| spin.js 에 알림말 text 넣기 / 로딩바 (0) | 2017.08.22 |
| javascript encoding url / url encode decode 하기 / javascript 한글 깨짐 (0) | 2017.06.28 |
| javascript 프로그레스바 / 로딩바 플러그인 (0) | 2017.05.29 |
| html2canvas 적용 시 table border 안나오는 문제 (4) | 2017.03.13 |
| JSP 페이지 이미지로 저장, 웹페이지 이미지로 저장, 페이지 이미지 캡쳐 (12) | 2017.03.13 |
| javascript showModalDialog 에서 window.open 시 session 이슈 (0) | 2017.01.05 |