taeho's life logger

getElementById()가 크롬에서 동작하지 않는 경우 체크할 것 본문

Web/DB/Dev

getElementById()가 크롬에서 동작하지 않는 경우 체크할 것

taeho Tae-Ho 2013.06.02 16:44

조그마한 웹페이지를 하나 만들어도 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>

<body>

<br>

<table border=1 width=250>

<tr>

<td>이슈 기한/요청일자</td>

</tr>

<tr>

<td><input type=text name=order size="15" maxlength="15" value="<? echo $udate; ?>" readonly>

</td>

</tr>

<tr>

<td><br><input type=button value="변경하기" onClick="dateupdate();"></input></td>

</tr>

</table>

위의 소스는 IE9.0에서 잘 실행된다. 하지만 Chrome 브라우저에서는 에러가 발생한다. 그 이유를 찾는데 두 시간 여가 걸렸다. 이 얼마나 시간낭비인가? 그리고 그 이유는 아주 단순한데 있었다. 이유가 뭔고하니...

getElementById() 함수는 객체의 ID를 기준으로 Document에 있는 객체를 찾는다... 그런데 <input type=text name=order size....> 의 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>

</head>

<body>

<br>

<table border=1 width=250>

<tr>

<td>이슈 기한/요청일자</td>

</tr>

<tr>

<td><input type=text name=order id="closedate" size="15" maxlength="15" value="<? echo $udate; ?>" readonly>

</td>

</tr>

<tr>

<td><br><input type=button value="변경하기" onClick="dateupdate();"></input></td>

</tr>

</table>



신고
0 Comments
댓글쓰기 폼