IE8에서야 정상이 되어가는 자바스크립트 엔진. 하지만...

M$에서 Internet Explorer 8.0을 공개했습니다.
하지만, IE8에선 여러가지 문제점이 터지고 있더군요.

저에겐 그 중 하나가 BBCode for TiStory 2.4가 오동작을 한다는 것이었습니다.
원인을 확인해보니 일관성이 없는 IE의 js 엔진에 억지로 맞춰놓은 코드가 원인이었습니다.

아래는 HTML 소스 전체를 뒤져서 <div class="bbcode">가 발견되면 발견된 메시지 박스를 띄우는 코드입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttribute('class') == 'bbcode')
            alert("non MSIE!");
</script>
</body></html>

이 별 특성 없는 코드는 Opera, Firefox, Chrome 에서는 버전에 상관없이 잘 동작합니다.

사용자 삽입 이미지

하지만, 대한민국의 국민 웹브라우저 IE에서는 좀 다릅니다.
IE6, IE7에서는 정상동작을 하지 않습니다.
정확히는 getAttribute() 함수를 씹어먹어버립니다.

오류도 띄우지 않습니다. 그야말로 "아무것도 묻지도 따지지도 않고" 넘어갑니다.

이 코드를 IE6, IE7에서 동작시키려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    if (/msie/i.test (navigator.userAgent)) { // IE6, 7만을 위하여...
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttributeNode('class').value == 'bbcode')
                alert("MSIE!");
    }
    else
    {
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttribute('class') == 'bbcode')
                alert("non MSIE!");
    }
</script>
</body></html>

추가된 if (/msie/i.test (navigator.userAgent)) 는 브라우저의 userAgent를 읽어 msie인지 확인하는 부분입니다.
그리고, getAttribute() 함수 대신에 getAttributeNode() 함수를 사용해서 동일하게 동작하도록 만들었습니다.
이렇게 수정하면 IE6, IE7에서도 동일하게 동작합니다.

그런데... 이 코드는 불행하게도 IE8에서는 동작하지 않습니다.

사용자 삽입 이미지

이게 뭐냐고!!!!!!!!!


IE8에서는 getAttributeNode() 함수의 동작방식이 정상적으로 바뀌었기 때문입니다.
IE8을 포함한 거의 모든 웹브라우저에서 정상동작하도록 하려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttributeNode('class') &&
            tags[i].getAttributeNode('class').value == 'bbcode')
            alert("MSIE!");
</script>
</body></html>

이제야 MS의 웹브라우저가 정상적인 궤도에 가까워졌습니다.

하지만, 이 상태로 만세를 불러줄 수만은 없는 것이... IE6, IE7에만 최적화된 페이지가 너무나 많기 때문입니다.
더불어 이렇게 버그 투성이로 렌더링하는 것이 소위 "호환성 보기"의 실체란 점도 있습니다.

부디 우리나라의 웹 개발자들이 특정 회사의 브라우저에 종속적이지 않고 웹표준을 준수하면 좋겠습니다.
아마 그랬으면 이런 원초적인 버그가 진작에 해결되지 않았을까요?


덧. 이 사태의 진정한 문제는 IE6, IE7 때문에 getAttribute() 함수 자체가 못쓰는 함수가 되었다는 점입니다.



'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글

BBCode for Tistory 2.5 대망의 업데이트  (16) 2009.04.02
innerHTML에서 다시금 느낀 "난 IE가 싫어!"  (8) 2009.04.01
블로그 관련 to-do 리스트  (4) 2009.03.25
새 도메인 구입 및 도메인 이전 준비 공지  (19) 2009.03.08
2008 올블로그 어워드 참석 후기  (27) 2009.03.01

티스토리툴바