마사키군의 다락방

끄적끄적할게 있을때 끄적거려 보관해두는 다락방

IE11에서 showModalWindow()의 리턴값을 받아오지 못하는 오류

사실 요즘처럼 js 라이브러리가 잘 되어있고, 특히 jQuery를 기반으로 한 수많은 멋진 라이브러리가 있는 시대에 굳이 window.showModalWindow()를 사용할 일이 어디 있겠느냐마는-_-

오래된 웹페이지나 그런 제품을 유지보수하고 있다 보면 showModalWindow()가 사용된 페이지는 의외로 흔히 접할 수 있는 것 같다.

각설하고, 2014년 12월 12일 현재 시점에서 Internet Explorer 최신 버전인 11.0.9600.17501의 경우, 연속으로 모달창을 열었을 경우 리턴값을 제대로 받아오지 못하는 문제가 있다.

Internet Explorer 11.0.9600.17501

↑ 일단은 요 버전의 IE에서 발생한다는 말씀. 다른 버전에서는 아직 확인해보지 않았다.

문제점은 이렇다. 브라우저 창에서 모달 창을 열고, 그 모달 창에서 또 모달 창을 열었을 경우, 두번째 모달창의 리턴값을 첫번째 모달창이 정상적으로 받아오지 못한다.

일단 기본 웹페이지에 아래와 같은 코드가 있다고 해 보자.

위 코드가 실행되면 당연히 1st_modal.html이 모달창으로 열릴 것이다.

이제, 1st_modal.html에 아래와 같은 코드가 또 있다고 해 보자.

위 코드가 실행되면 역시 2nd_modal.html이 모달창으로 열릴 것이다.

이제, 2nd_modal.html에서 필요한 작업을 모두 수행하고 일반적인 방법으로 리턴값을 전달하고 창을 닫는다.

이러면 2nd_modal.html 창이 닫히기 전에 모달창의 리턴값으로 “process_complete”를 전달하고 창을 닫아야 하는데, 이후 1st_modal.html에서 1st_ret의 값을 조사해보면 해당 값이 undefined로 나온다. 즉, 제대로 값이 전달되지 않는다.

비슷하게 1st_modal.html에서 값을 리턴하고 기본 웹페이지에서 리턴값을 확인해보면, 이때는 올바르게 표시된다. 즉, 일반 웹페이지↔︎모달창 사이에서는 리턴값이 올바르게 전달되는데, 모달창↔︎모달창 사이에서는 리턴값이 올바르게 전달되지 않는다.

오늘 테스트해본 것은 해당 버전의 IE 하에서의 값 리턴 뿐으로, 다른 버전의 IE에서도 똑같은 문제가 발생하는지, 부모창으로의 리턴값 전달이 아닌 자식창으로의 파라메터 전달도 오작동하는지는 확인해보지 않았다.

같은 코드를 Firefox 34.0.5에서 테스트해본 결과, 두번째 모달창의 리턴값을 첫번째 모달창이 올바르게 받아내는 것을 확인할 수 있었다. 아무래도 이건 이번 버전의 IE의 오류인 것 같다.

하지만 사실 showModalWindow()를 안쓰는 것이 최선이긴 하다. Chrome에서는 이미 showModalWindow() 메서드가 제거되었기 때문에, 관련 코드를 실행하면 오류가 발생한다. Chrome 팀의 공식적인 문서는 찾지 못하였지만, Opera팀이 Chromium 팀에서 더이상 showModalWindow() API를 지원하지 않겠다는 내용에 대해 자세하게 적어놓은 글이 있으니 참고해도 좋을 것 같다.

뭔가 좀 아이러니한 발언일수도 있지만, 굳이 모달창이 필요한 상황이라면 jQuery UIDialog widget 등을 이용해서 처리하고, showModalWindow() 메서드는 최대한 사용을 자제하는 것이 오히려 호환성을 위한 길인거 같다.

, ,

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다