[컴][웹][자바스크립트] IE8을 위한 Javascript 점검 사항

인터넷 익스플로러 8 을 위한 javascript 수정 / javascript 인터넷 익스플로러 호환성 / javascript 호환성 / ie8 에서 javascript / ie8에서 자바스크립트




기본적으로 chrome 에서 작업을 했는데, IE 8 버전에 대한 호환성을 위해서 IE 11 에서 에뮬레이션 기능을 이용해 IE 8 에 대한 확인을 하고 있다. 여기서 호환성에 대한 해결은 plain javascript 를 사용하거나 jQuery 를 이용한다.



dataset 지원

dataset property 를 지원하지 않는다. 그래서 아래처럼 수정했다.
$(el).attr('data-mydata')

참고로
$(el).data('mydata')
이런 식으로 사용할 수도 있는데, 이것은 다른 jquery library 들과 충돌날 가능성이 있어 개인적으로는 attr() 을 이용하는 것이 나은 듯 하다.


for ... in

for ... in 을 이용해서 Array 를 iterate 하는 데에 indexOf 가 값이라며 넘어왔다. 이것이 IE 의 문제라고 판단했는데, 확인해 보니, array 에 대해서 for...in 사용을 권장하지 않았다. 여하튼 Array 의 iterate 은 while 이나 for 문으로 대체해야 한다.


ajax call 에 대한 지원, CORS

그런데 이부분은 jquery 로 해결되는 듯 하다.


여러개의 script tag 를 사용할 때 global 변수

이것이 ie8 의 bug 인지, 원래 정책인지는 모르겠으나, 일단 두번째 article 에서는 그냥 하나의 script tag 를 사용하라고 한다.

개인적으로 window.myval 등을 활용해서 global variable 을 사용하고 있다. 이 방법도 잘 사용하면 가능할 듯 하다.


element reuse

IE8 에서, element 를 만들어놓은 상태(S 라 하자)에서 jquery 를 이용해서 특정 element(A 라 하자) 에 append 시켰다. 그런데 이 녀석이 있던 A element 가 없어졌는데, 이 S element 는 가지고 있었다. 그래서 그 변수를 이용해서 새로운 B element 에 append 를 시켰는데, 화면에 보이지 않았다.

아마도 화면에서 사라진 녀석중에 아직 쓰이고 있는 녀석에 대한 처리가 최신브라우저와 상이한듯 보인다.

여튼 그래서 reuse 를 없애고, 매순간 새롭게 element 를 만들어서 사용해야 했다.


input event


이 녀석이 지원이 안돼서 DataTable (sever-side processing 사용)의 search input 도 동작을 안하는 듯 했다. 아래처럼 ie8 에서는 propertychange 를 사용할 수 있다.
  • $el.on('input propertychange');

자세한 사항은 아래 글을 참고하자.






뒤늦게 설정한 event handler 에 대한

ie8 에서 뒤늦게 set 하는 event handler 는 제대로 동작하지 않는 듯 보인다. 아직 근거자료는 찾지 못했지만, 지금 내 상황에서 보면, 처음 화면이 보일 때 div 에 click handler 를 set 해 놓으면 잘 동작한다.

그런데 이것을 주기적으로 새롭게 create 해서 click handler 를 set 하면 2번정도까지 click handler 가 동작하다가, 그 후에는 동작하지 않는다.

그리고 또 한가지 경우는 item 에 close button 을 만들고 click handler 를 설정했는데, 첫화면에 뜰 때는 잘 동작했다. 하지만 이 item 을 dynamic 하게 없애고, 다시 만들때의 click handler 는 동작하지 않았다.



javascript 로 생성한 element 문제

특정 click event 마다 새롭게 element 를 생성해서 attach 를 했는데, 이때 이 새롭게 생성된 element 에 bind 한 handler 의 동작이 정상적이지 않았다.
처음 handler 는 동작했지만, 그 이후의 event handler 는 동작하지 않았다. 혹시나 새롭게 event handler 를 bind 하면 될 지 알았는데, 그것도 안됐다. (event 가 발생하지 않는 것인지, 단순히 handler 를 호출하지 않는 것인지는 구분이 되지 않는다.)



check box 의 change event handler return 값

모르고 handler 에 return 값을 넣게 됐는데, 그로 인해 이상동작 했다. check box 가 계속 check 되지 않는 현상이 일어났다. return 값이 checked property 를 assign 하는 code 였다.
return $inputs.eq(checkboxIndex).on('change', function(e) {
          // return;
          $inputs[inputIndex].disabled = !this.checked;
          return;
        });

javascript - Jquery event handlers return values - Stack Overflow



bootstrap modal 에서 close 가 안될 때

아마 이경우는 event handler model 이 다르기 때문인듯 싶긴 하다.



여하튼 현상은 이렇다.
modal-alert-success 란 id 의 modal 이 있고, 이녀석을 호출하는데, 닫히는 동작이 되지 않았다. 전혀 이벤트가 발생하지 않았다. 그런데, bootstrap.js code 에서 event 설정 하는 부분은 제대로 동작하고 있었다.

그래서 직접 event 를 set 해보고자, 아래처럼 event 를 설정했다. 그랬더니 이전의 close event 가 잘 동작했다.

$("#modal-alert-success").one('click.dismiss.bs.modal', '[data-dismiss="modal"]', function(){ console.log("test"); });

이유는 알 수 없지만, 무슨 이유에선지 click.dismiss.bs.modal 이 제대로 발생하지 않은듯 한데, 한 번 더 정의 해 주는 것으로 제대로 설정된 듯 하다.

여튼 비슷한 경우가 있을지 몰라 적어놓는다.



audio file

javascript - Start/pause audio in an embed tag ? (IE8+) - Stack Overflow





댓글 없음:

댓글 쓰기