ExternalInterface 를 이용해 JavaScript 를 호출할때 생긴 스크립트 에러

EditPlus 의 내장 브라우저는 IE 엔진을 사용해서 렌더링을 하죠. 현재 EditPlus 의 최신 버전인 3.11의 내장 브라우저는 IE8과는 매우 다르고 IE6은 아닌것 같으면서 IE7과도 약간 다른, 어느쪽에 가장 가깝느냐 하면 버전 7에 가깝고, 숫자로 표현하면 체감상 6.7정도 되는 렌더링 엔진입니다.^[01]

EditPlus 에서는 Ctrl + B 를 이용해서 브라우저 미리보기를 하면 위의 스크립트 에러창이 모달(modal)창으로 자동으로 뜨고, 실제 데스크탑에 설치된 IE8로 보면 왼쪽 아래에 노란색 삼각형 스크립트 에러 표시가 나는 상황입니다. 에러 메세지로 보아 ActionScript 에서도 흔하게 보는 null 객체 에러네요.

그럼 FF나 GC 에서는? 괜찮습니다. 이 에러는 IE 에서만 나오는 문제였고, IETester 로 확인한 결과 IE6, 7, 8 모두에서 동일하게 발견되었습니다.

한참동안 원인을 찾을 수가 없어 꽤 오랜 시간을 헤메다가^[02] , 다시 처음부터 되짚어가보자는 생각에 Flash IDE의 퍼블리싱 세팅(Ctrl + Shift + F12)에서 html 을 포함하여 퍼블리싱을 한 후, 새로 만든 html로 swf 을 보니 이번에는 ExternalInterface가 정상적으로 동작하는 겁니다.

기존 html 에 사용한 object , embed 코드와, 새로 만든 코드의 다른점을 살펴본 결과, 기존 html 코드에는 object 태그의 id 값을 주지 않은 것을 발견했습니다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="swf_app.swf" />
	<param name="quality" value="high" />
	<embed src="swf_app.swf" quality="high" width="100%" height="100%" name="" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_kr" />
</object>

object 태그 속성중 height="100%" 다음에 보이는 id="" 의 공백문자가 보이시나요?
한편, 비 IE 계열 브라우저들이 사용하는 embed 태그에는 id 속성이 있어야 할 자리에 name 속성이 있는데요, FF나 GC 는 이렇게 name="" 속성이 공백이라도 ExternalInterface 가 동작하는데에는 전혀 문제가 없습니다. 실제로 object 의 id 속성과 embed 의 name 속성은 Flash IDE에서 퍼블리싱 했을 때, 그다지 의미 없어 보였던 swf 의 파일명이 기본값으로 입력되는것에 이런 이유도 포함되어 있었던 겁니다.

‘설마…’ 하면서 임의의 값을 넣었더니 허무하게도 정상적으로 동작합니다. 임의 값이란 정말 임의의 값입니다. 공백문자만 아니라면 아무 문자나 상관이 없습니다.

ExternalInterface 를 사용하지 않는다면 id 속성이 공백문자라도 swf 의 동작 자체는 문제가 생기지 않습니다. 결국 JavaScript 함수 호출을 하기 위해, swf 무비와 html 컨테이너 사이에서 함수 호출이 발생한 객체(swf)를 IE가 찾지 못해서 생기는 에러인 것이죠.

1. 실제로 이런 버전의 IE는 없지만, html의 표준화 표현 정도와, 여러 가지 렌더링 표현등을 고려해 봤을때 그정도 될것 같다는 의미 입니다.
2. 지금 기억을 더듬어 보면 몇시간 동안 원인을 못찾았던것 같습니다

 www초기에 넷스케이프와 IE의 두 브라우져에 모두 최적화 해본 경험에 비추어보면 도저히 사람이 할짓이 못됩니다. 두 브라우저의 특성을 모두 꿰고 있어야할 뿐만 아니라, 어느 지점에서는 도저히 양립할 수 없는 벽에 부딛히게 됩니다. 극단적인 상황으로는 자바스크립트로 브라우져 종류를 감지하여 각각의 페이지를 따로 만들어 구현하기도 했습니다. 농담이 아닙니다. 실제로 그런 웹 사이트들이 있었어요.

IE가 화면 표현에 있어서 일관된 룰을 지켜주면 좋은데, (그것이 웹 표준이 아닐지라도 말이죠) 버전에 따라서 상이한 화면을 보여주니 난감할 따름입니다.
하위버전에서 상위로는 업그레이드 하면 되지만, 그 반대 방향으로는 쉽지 않은지라 웹 퍼블리싱 분야에서 일하고 있는 사람들은 IE 버전은 가능하면 하위 버전으로 사용하고 있는것 같습니다.

이 문제를 머리싸매고 고민한 사람이 얼마나 많겠습니까. 그래서 이런 프로그램도 나온 모양입니다.

http://www.my-debugbar.com/wiki/IETester/HomePage

화면에서 보듯이 IE 각 버전별로 테스트 해 볼 수 있습니다.
이제 회사 PC의 IE를 7로 업그레이드해도 될것 같습니다.