Explorer 4에서나 Netscape 4에서 다 작동하려면

앞의 예제에서 보았듯이 Explorer 4용 소스에서는 Netscape 4가 작동하지 않고, Netscape 4용 소스에서는 Explorer 4가 작용되지 않는다.

Explorer 4에서나 Netscape 4에서 다 작동하려면 두가지 소스 코드를 결합하여야 한다. 앞의 예제들을 간단히 결합하면:

소스 코드를 보면

<table border="0" width=50% cellspacing="0"
  cellpadding="0" bgcolor="#ffeeff">
<tr><td height="30">
<div id="mydiv" style="background-color:#ffeeff; height:18px;"><!Explorer>
  <ilayer id="ilayid" width=100% height=30>                    <!Netscape>
    <layer id="alayer" width=100% height=30>                   <!Netscape>
    </layer>
</ilayer>
</div>

<script language="JavaScript1.2">
<!--
var msgs=new Array();
msgs[0]='오늘은 즐거운 일요일이다.';
msgs[1]='산으로 가서 자연을 만끽할까?';
msgs[2]='바다로 가서 해수욕이나 할까?';
var numb=0;
function shiftit2(){
  if (document.all) mydiv.innerHTML=msgs[numb]; // Explorer
  else {
    document.alayer.document.write(msgs[numb]); // Nescape
    document.alayer.document.close();
  }
  if (numb==2) numb=0
  else numb++;
  setTimeout("shiftit2()",3000); // 약 3초
}
window.onload=shiftit2;
//-->
</script>
</td></tr></table>

양대 브라우저에서 작동하는 DHTML이란 양대 브라우저가 사용하는 엘레멘트와 애트리뷰트가 다르기 때문에 Javascript를 작성 할 때 방문자가 어느 브라우서를 사용하는가에 따라 적용하는 내용이 달라지게 하는 것이 현재로서 보편적으로 사용되는 기본 방식이다. 여기서는 어떻게 쉽게 이를 적용하도록 하는가를 보겠다.

기본적으로 두가지 방법이 사용되는데, 그 중 하나는 공통으로 사용 될 수 있는 요소를 찾아 양대 브라우저에서 무난히 작동하는 공통 layer를 생성하는 것이고, 다른 하나는 사용자의 브라우저에 맞추어 작용하게 하는 방식인 것이다.

양대 브라우저에서 작동하는 layer의 생성

Netscape에서는 layer 태그를, Explorer에서는 <div> 이나 <span> 태그를 사용한다는 것을 염두에 두고, 양대 브라우저에서 작동하는 <layer>를 생성 한다는 것은 Netscape 4를 위한 layer를 만들고, Explorer 4를 위한 <div> 이나 <span> 태그도 동시에 만드는 것이다. 때에 따라서는 약간의 문제점을 감수하고 한가지 layer로 양대 브라우저에서 사용 할 수 있게 할 수도 있다. Netscape에서 절대위치를 주는 div을 사용하여 Explorer에서도 작동하게 하는 것이 그 한 예이다. 양대 브라우저에서 작동하는 layer 생성의 예제를 보자:

<div id="crosslayer" style="position:absolute"></div>

Netscape 4에서 이 <div>을 layer와 꼭 같게 처리한다. 다른 layer에 접속하는 것과 같이 먼저 문서 오브젝트(document object)에 접속하고 그 layer의 인식자(id)를 지정하면 된다.

document.crosslayer

Explorer 4에서는 단순히 div의 인식자(id)를 사용하면 된다.

crosslayer

이로서 간단히 양대 브라우저에서 작동하는 layer를 생성하였다. 그러나 문제는 이 div layer가 에 의한 것과 꼭 같이 작동하지 않고 때때로 예기치 않았던 문제를 야기시킨다는 단점이 있다.

사용자 브라우저에 맞게 오브젝트를 선택하여 적용

많은 Javascript 프로그래머는 navigator object를 사용하여 방문자의 브라우저를 알아 낼 수 있는데, 이렇게 알아낸 브라우저의 종류에 따라 방향을 바꾸어 작용되는 오브젝트를 채택하여 사용하도록 하는 방식으로 보편적으로 많이 사용된다. 아래 그 예제를 보자:

var ns4=(navigator.appName=="Netscape"&&
  navigator.appVersion>=4)
var ie4=(navigator.appName=="Microsoft Internet Explorer"&&
  navigator.appVersion>=4)

이와 같이 navigator object를 사용하여 브라우저를 알아내는 방법이 가장 전통적인 방식이나, 코딩하기가 좀 복잡한 것이 단점이다. 대안으로 사용되는 오브젝트(object)를 감지하는 방법으로 브라우저를 알 수 있다.

이것은 브라우저가 특정 오브젝트를 지원하지 않으면, Javascript가 없는 값(null)을 가지고 돌아오므로(return), 특정 오브젝트에 대해 return 값이 null인가 아닌가에 따라 사용자의 브라우저를 판정 할 수 있는 것이다.

Netscape 3 이상과 Explorer 4 이상은 document.images 오브젝트를 지원하므로, 다음의 예제와 같이 브라우저를 판정 할 수 있다.

if (document.images)
  alert("방문자 브라우저는Netscape 3 이상이거나 Explorer 4 이상이다.")

이 방식으로 귀하의 브라우저를 점검하면

navigator object를 사용하여 브라우저를 알아내는 방법보다는 이와 같이 사용 오브젝트를 통하여 간접적으로 브라우저를 판정하는 것이 훨씬 용이하다.

이와 같은 간접적인 방식으로 브라우저를 알아 낼 수 있는 오브젝트들을 보면 다음과 같다:

if (document.layers) alert("브라우저는 Netscape 4 이상임");
if (document.all) alert("브라우저는 Explorer 4 이상임");
if (document.layers||document.all)
  alert("브라우저는 Netscape 4 이상 혹은 Explorer 4 이상임");