Onunload 이벤트 할당 하기

Onunload 이벤트 할당 하기

페이지 로드 이벤트인 onload 이벤트와 달리 페이지 종료 시(Refrash, Redirect, window.close) 발생하는 onunload 이벤트와 같은 경우 브라우저 벤더 및 버전까지 분기 처리해야 하는 이슈가 존재한다.

특히, Chrome 브라우저 같은 경우는 테스트 해본 결과 종료 시 onunload 이벤트가 발생하지 않아 onbeforeunload 이벤트를 이용하여 처리해야 한다.

이를 해결하기 위해 아래 코드의 onUnload() 함수를 "onbeforeunload" 이벤트에 할당하여, onunload 이벤트 발생 브라우저(Chrome 브라우저 제외)와 그렇지 않은 브라우저(Chrome)를 분기처리 하여 모든 브라우저에서 onunload 시 해당 이벤트 handler를 발생 시킨다.

1. function getBrowserInfo() {
2.  
3.     var msie = /(msie) ([\d]{1,})./gi.exec(window.navigator.userAgent.split(';'));
4.     var firefox = /(firefox)\/([\d]{1,})./gi.exec(window.navigator.userAgent.split(' ')[6]);
5.     var safari = /(safari)\/([\d]{1,})./gi.exec(window.navigator.userAgent.split(' ')[9]);
6.     var chrome = /(chrome)\/([\d]{1,})./gi.exec(window.navigator.userAgent.split(' ')[8]);
7.  
8.     var name = '';
9.     var version = 0;
10.  
11.     if (msie) {
12.         name = msie[1].toLowerCase();
13.         version = msie[2];
14.     }
15.     else if (firefox) {
16.         name = firefox[1].toLowerCase();
17.         version = firefox[2];
18.     }
19.     else if (safari && !chrome) {
20.         name = safari[1].toLowerCase();
21.         version = /(version)\/([\d]{1,})./gi.exec(window.navigator.userAgent.split(' ')[8])[2];
22.     }
23.     else if (safari && chrome) {
24.         name = chrome[1].toLowerCase();
25.         version = chrome[2];
26.     }
27.  
28.     return {
29.         name: name,
30.         version: version
31.     }
32. }
33.  
34. function onUnload(e, callback) {
35.  
36.     var ag = window.navigator.userAgent.toLocaleLowerCase()
37.       , binfo = getBrowserInfo();
38.  
39.     e = window.event || e;
40.     callback = typeof callback === 'function' ? callback : function () { ; };
41.  
42.     // IE
43.     if (binfo.name === 'msie') {
44.         if (confirm("callback 함수가 실행 됩니다.")) {
45.             bind(window, 'unload', function (e) { callback() });
46.         }
47.     }
48.     else {
49.         if (binfo.name === 'firefox') {
50.             if (confirm("callback 함수가 실행 됩니다.")) {
51.                 bind(window, 'unload', function (e) { callback(); });
52.             }
53.             else {
54.                 // window loading stop
55.                 windiw.setTimeout(function () { window.stop(); }, 1);
56.             }
57.         }
58.         else if (binfo.name === 'safari') {
59.             if (window.confirm('callback 함수가 실행 됩니다.')) {
60.                 bind(window, 'unload', function (e) { callback(); });
61.             }
62.         }
63.         else if (binfo.name === 'chrome') {
64.             return callback();
65.         }
66.     }
67. }
68.  
69. function callback() {
70.     // window unload 이벤트 핸들러
71.     document.title = 'title';
72.     alert(document.title);
73.     return 'callback 함수가 실행 됩니다.';
74. }
75.  
76. // 이벤트 등록 함수
77. function bind(elem, type, handler, capture) {
78.     type = typeof type === 'string' && type || '';
79.     handler = typeof handler === 'function' ? handler : function () { ; };
80.  
81.     if (elem.addEventListener) {
82.         elem.addEventListener(type, handler, capture);
83.     }
84.     else if (elem.attachEvent) {
85.         elem.attachEvent('on' + type, handler);
86.     }
87.  
88.     return elem;
89. };
90.  
91.  
92. bind(window, 'beforeunload', function (e) {
93.     return onUnload.apply(this, [e, callback]);
94. });

위 코드와 같이 Chrome 브라우저를 제외한 나머지 브라우저는 onunload 이벤트가 정상적으로 발생하므로 onbeforeunload 이벤트 발생 시 해당 이벤트를 할당 시킨다.