IE 11이하 버전 IE 구버전 오류 (a href , window.onbeforeonload)

안녕하세요 QA 인데 qa자료가 제일없는거 같아서 조금 그렇네용...

오늘은 IE11버전 이하 IE 10버전 부터 발생하는 이슈 중 특이한 이슈가 있어서 작성하게 되었습니다.

시작은 즉슨 .. IE 9 버전에서 기능이 이상합니다.! 라는 이야기와 함께 찾아봤습니다.

준비물

window.onbeforeunload  && a 태그와 href 속성

요약 

a태그가 눌릴때마다 window.onbeforeunload 가 호출되는 현상 IE 구버전에서 발생하게됩니다.

내용 

<a href="javascript:pay();" class="btn_b btn_red"><span>결제하기</span></a>

 와 같은 코드가 있을때

해당 DOM 에 만약에 window.onbeforeunload 가 들어가 있을 경우

해당 a태그가 클릭될때마다 onbeforeunlaod에서 작성된 함수가 계속 실행됩니다.

노답 버그!

해결법

1번 href를 쓰지 말고 onClick 을 사용합니다. 

2번 의 경우는 오류가 났던 사이트 개발자 분이 직접 이렇게 사용하여서 해결했다고 합니다. 

jQuery 를 사용한 방법인데요

$(window).data('beforeunload',window.onbeforeunload);

     $('a[href^="javascript:"]').hover( 

        function(){window.onbeforeunload=null;},

        function(){window.onbeforeunload=$(window).data('beforeunload');}

    );

약간의 꼼수(?) 느낌으로 이렇게 해결했다고하네요

약간의 설명이들어가자면     $('a[href^="javascript:"]').hover( 

는 a태그중 href속성에서 javascript: 로 시작하는 모든속성에 대한 .hover 작업입니다.

아래의 hover 속성에 보면 param 으로 2개가 들어가있죠 , 로 나눠져있는걸 보면

jQuery 를 안쓰는 요즘 분들? 또는 jQuery 자체를 안쓰시는 분들은 이해가 안되실수도 있으니

jQuery doc를 확인해보면

.hover( handlerIn, handlerOut )

이렇게 되어있습니다.

말그대로 들어올때, 나갈때인거죠 

클릭하기위해서 마우스가 올라왔을때 window.onbeforeunload를 빼버립니다. 그리고 클릭하면서 href가 실행된 후

밖으로 나갈때 다시 원래의 값을 붙여줍니다. 

부족한 글 읽어 주셔서 감사합니다.~