Internet Explorer 10 설치 후 Flash 객체의 메서드/속성 접근 오류가 발생한다면?
최근 Windows 7/2008 R2용의 IE 10이 릴리스 되었는데요. 이 때문에 웹 페이지 방문 시 플래시 객체를 포함하는 경우 다음과 같은 오류가 발생할 수 있습니다.
[object HTMLEmbedElement]
TypeError: 개체가 'refresh' 속성이나 메서드를 지원하지 않습니다.
JavaScript runtime error: Object doesn't support property or method 'refresh'
SCRIPT438: Object doesn't support property or method 'refresh'
Default.aspx, line 45 character 9
위의 오류 메시지는 해당 플래시 객체가 내부적으로 ExternalInterface.addCallback을 이용해 등록한 refresh 메서드가 호출이 안되는 것을 보여줍니다.
이 오류가 발생한 화면을 보면 다음과 같은 식으로 embed로 감싼 경우입니다.
<script type="text/javascript">
$(document).ready(function () {
$("#btnNewGuid").click(function () {
var elem = document.getElementById("applicationList");
elem.refresh();
});
});
</script>
<embed name="applicationList" id="applicationList"
pluginspage="http://www.adobe.com/go/getflashplayer"
src="swf/ApplicationList.swf"
type="application/x-shockwave-flash">
왜냐하면, Internet Explorer에서는 embed로 감싼 객체인 경우 별도로 HTMLEmbedElement로 표시를 하며, 이 객체를 통해서는 플래시로부터 노출된 메서드를 호출할 수 없습니다. 따라서, IE를 위해서는 다음과 같이 object 태그로 변경되어야 합니다.
<object name="applicationList" id="applicationList"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="ApplicationList.swf" />
</object>
물론, 이렇게 변경시키면 크롬 등에서는 object 태그를 지원하지 않으므로 다시 오류가 발생합니다. 이에 대한 해결책으로 object 안에 embed를 넣는 방식을 설명하는 것을 간혹 볼 수 있는데요.
<object name="applicationList" id="applicationList"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="ApplicationList.swf" />
<embed name="applicationList" id="applicationList"
pluginspage="http://www.adobe.com/go/getflashplayer" src="ApplicationList.swf"
type="application/x-shockwave-flash"
></embed>
</object>
이렇게 하면 안됩니다. 이것이 정상적으로 동작하는 경우는, 스크립트에서 코드로 접근하지 않는 플래시 객체를 넣을 때에만 유효합니다. 지금처럼 스크립트에서 접근하는 경우에는 IE는 괜찮지만 크롬에서는 여전히 아래와 같은 식의 오류가 발생합니다.
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'refresh' Default.aspx:47
(anonymous function) Default.aspx:47
jQuery.event.handle jquery-1.4.1.js:1899
eventHandle
그래서, 일반적으로는 document.write 등의 방법을 활용해서 사용자의 브라우저가 IE이면 object 태그로 쓰고, 그 외의 경우에는 embed 태그로 쓰게 됩니다. 이에 대한 구체적인 자바 스크립트 코드는 다음의 글을 참고하세요.
Using applet, object and embed Tags - Using JavaScript
; http://docs.oracle.com/javase/1.5.0/docs/guide/plugin/developer_guide/using_tags.html
사실, 이 문제는 IE 10에서만 그런 것은 아닙니다. IE 9에서도 역시 그와 같은 문제가 발생할 수 있었는데... 왜? IE 10에 와서 이런 호환성 문제를 또 겪게 되는 걸까요?
그런 상황이 발생할 수 있는 한가지 사례가 있습니다. object와 embed를 출력하기 위해 User-Agent에 기반해서 판단하는 코드가 IE 9까지 정확하게 버전 번호를 인식하도록 만든 경우입니다. 즉, "
Using applet, object and embed Tags - Using JavaScript"의 글처럼 User-Agent를 모든 IE에 대해 인식하도록 만들어져 있지 않은 것입니다.
그렇게 되면, IE인데도 embed가 출력되도록 코드가 동작할 수 있기 때문에 오류가 발생하게 됩니다. 만약 기존 사이트 중에 이런 식으로 만들어져 있다면, 간단하게 IE 10에 대한 버전 정보를 추가하는 것만으로도 문제가 해결될 수 있습니다. 유지보수가 중단된 곳이라면... ^^; 어쩔 수 없습니다. 크롬 등의 웹 브라우저로 접속해야 합니다.
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]