조그마한 웹페이지를 하나 만들어도 Internet Explorer와 Chrome, Firefox 등 여러 브라우저에서 정상적으로 동작하는지를 검토해야하고 게다가 모바일에서까지 잘 동작하는지 체크하고 안되면 수정하는 것은 많은 웹개발자들에게 큰 어려움이다.
어쩌다 한번 웹 소스를 수정하는 나에게도 이건 정말 욕나오는 시추에이션이다.
오늘도 그런 일이 하나 있었다. 그런데 이 경우는 엄밀하게 이야기해서 “나의 실수”였지만 그 실수를 유발하는 것은 다름아닌 Microsoft의 IE였다.
뭔고하니 바로 자바스크립트에서 웹페이지상에 생성된 객체(select box, text box 등)를 조회하여 해당 객체를 리턴해주는 getElementById() 함수의 동작방식이다.
아래와 같은 소스가 있다.
<script language=javascript>
function dateupdate()
{
var target = document.getElementById(“order”);
iudate=target.value;
opener.location.href=”request_issuedate_update.php?rqid=<? echo $rqid; ?>&updatedate=” + iudate + “&olddate=<? echo $udate ?>”;
window.close();
}
</script>
<table border=”1″ width=”250″>
<tbody>
<tr>
<td>이슈 기한/요청일자</td>
</tr>
<tr>
<td><input maxlength=”15″ name=”order” readonly=”readonly” size=”15″ type=”text” value=”<? echo $udate; ?>” /></td>
</tr>
<tr>
<td>
<input type=”button” value=”변경하기” /></td>
</tr>
</tbody>
</table>
위의 소스는 IE9.0에서 잘 실행된다. 하지만 Chrome 브라우저에서는 에러가 발생한다. 그 이유를 찾는데 두 시간 여가 걸렸다. 이 얼마나 시간낭비인가? 그리고 그 이유는 아주 단순한데 있었다. 이유가 뭔고하니…
getElementById() 함수는 객체의 ID를 기준으로 Document에 있는 객체를 찾는다… 그런데 의 order 입력상자는 name은 갖고 있지만 ID는 갖고 있지 않다. 때문에 크롬에서는 동작하지 않고 getElementByID() 함수가 null 을 리턴한다.
하지만 IE에서는 이상하게도 위의 소스가 에러없이 동작한다. 추측하건데 ID가 지정되지 않았으면 name 키워드로 찾아주는 불필요한 센스(?)를 갖고 있는 것 같다.
언뜻볼때 ID가 없으면 알아서 객체의 name으로 찾아주는 MS의 친절함 같겠지만 이런 과잉친절은 절대 있어서는 안된다. 왜냐하면 IE는 Java Script가 실행되는 운영체제의 역할을 수행한다. 하지만 Java Script는 IE, Chrome, Firefox 등 다양한 브라우저(가상플랫폼) 위애서 소스의 수정없이도 정상적으로 실행되도록 “엄격한” 규칙의 준수가 필요하기 때문이다.
위의 소스는 다음과 같이 두줄이 수정되어야 IE와 Chrome 두 브라우저에서 동일하게 정상적으로 실행된다.
<script language=javascript>
function dateupdate()
{
var target = document.getElementById(“closedate”);
iudate=target.value;
opener.location.href=”request_issuedate_update.php?rqid=<? echo $rqid; ?>&updatedate=” + iudate + “&olddate=<? echo $udate ?>”;
window.close();
}
</script>
<table border=”1″ width=”250″>
<tbody>
<tr>
<td>이슈 기한/요청일자</td>
</tr>
<tr>
<td><span style=”color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;”><span style=”font-size: 16px;”><input id=”closedate” maxlength=”15″ name=”order” readonly=”readonly” size=”15″ type=”text” value=”<? echo $udate; ?>” /></span></span></td>
</tr>
<tr>
<td><span style=”color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;”><span style=”font-size: 16px; white-space: normal;”><input type=”button” value=”변경하기” /></span></span></td>
</tr>
</tbody>
</table>