본문 바로가기

카테고리 없음

웹브라우저 알아내기

출처 : http://www.mozilla.or.kr/docs/web-developer/standard/content4.html

Cross Browsing 이란 웹브라우저와 관계 없이 통일된 웹페이지를 제공하는 데 목표가 있지만 실제로 웹 브라우저에 따라 달리 표현하는 부분이 있기 때문에 사용자의 웹브라우저의 벤더와 버전을 확인하여 이 에 따라 적절하게 웹페이지를 표시하거나 대응할 필요가 있다. 이는 오래된 웹브라우저를 사용하거나 특정 브라우저에서만 동작하는 기능을 제공할 때 특히 그렇다.

1994~2000년도 사이에 나온 브라우저들은 브라우저 시장 경쟁에서 이기기 위한 목적으로 출시된 것들이 어서 W3C에서 제정하는 표준을 지키는 브라우저는 아니었다. 브라우저간 비호환성은 웹서비스 발전에 가장 중대한 도전이기 때문에 이를 표준적으로 지원하는 브라우저의 출현은 필수 불가결한 것이었다. 현재 NS6 이상, IE5.5이상 버전의 브라우저들은 W3C의 웹 페이지 표현에 대한 표준인 HTML4.0, CSS1/2, W3C DOM 시 방식을 지원하고 있다.

Cross browsing을 통해 웹페이지를 완벽하게 개발을 하기 위해서는 브라우저의 기능을 동작시에 판별할 수 있어야 한다. 즉, 에러를 일으키지 않고 다양한 방문자들이 폭 넓게 사용해 주기 위한 것이다. 일반 적으로 사용되는 방법은 번거럽지만 브라우저를 식별하여 설계 시에 브라우저의 능력에 띠라 웹페이지 를 만드는 것이다. 그렇지만, 다양한 브라우저의 다른 기능을 개발자가 알아서 판단하고 제공한다는 것 은 쉬운 일은 아니다. 그러나, 지금까지 나열된 웹브라우저 차이점을 숙지하여 브라우저에 따라 판별 해 준다면 매우 유용할 것이다.

다음은 브라우저를 판별하는데 사용하는 몇 가지 방법들이다.

if (navigator.appName == "Microsoft Internet Explorer") {
document.all(id).style.visibility = "visible";
} else if (navigator.appName == "Netscape") {
if (parseInt(navigator.appVersion) < 5) {
document.layers[id].visibility = "show";
} else {
document.getElementById(id).style.visibility = "visible";
}

위의 예에서는 navigator 객체의 appName 이라고 하는 속성 값을 따라 "Microsoft Internet Explorer" 혹은 "Netscape"를 판별하여 대응하는 코드를 실행하게 된다. 그러나, Opera와 같이 navigator.appName 나 navigator.appVersion의 값을 간단하게 변경할 수 있는 브라우저도 있고 개개의 브라우저를 하나하 나 판별해야 하기 때문에 좋은 방법이라 할 수 없다.

그래서 대부분 객체 기반의 브라우저 판별법을 사용한다. 지원하는 브라우저에 객체모델이 존재하는지 여부를 통해 간단하게 구현 기능을 확인하는 것이다.

if (document.getElementById) { // NS6+, IE 5+, Opera 5+
elm = document.getElementById(id);
}
else if (document.all) { // IE4, Opera
elm = document.all[id];

}

else if (document.layers) { // NN4
elm = document.layers[id];
}

이 예는 document.getElementById이라고 하는 객체를 가지고 있는 브라우저에 대해서는 같은 코드를 실 행한다. document.getElementById 객체는 W3C이 규정되어 있는DOM의 표준으로 최근 웹브라우저는 대부 분 지원하므로 통상 이 방법을 사용해야 한다. 따라서 W3C DOM을 사용하는 표준 웹브라우저에서 다음과 같이 <div id=xxx></div>로 규정된 영역을 이동하는 간단한 스크립트를 생성할 수 있다.

function moveElement(id, x, y){ // W3C DOM Browser
var elm = document.getElementById(id);
if (elm) {
elm.style.left = x + "px";
elm.style.top = y + "px";
}
}

Browser sniffing으로 불리는 이러한 방법은 흔히 ECMAScript 함수에 의해 다루어져 아래와 같은 스크 립트로 브라우저의 버전과 제품 벤더를 확인할 수도 있다.

// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();

// *** BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);

// Note: Opera and WebTV spoof Navigator
var is_nav = ((agt.indexOf("mozilla")!=-1) && (agt.indexOf("spoofer")==-1)
&& (agt.indexOf("compatible") == -1) && (agt.indexOf("opera")==-1)
&& (agt.indexOf("webtv")==-1) && (agt.indexOf("hotjava")==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) ||
(agt.indexOf("; nav") != -1)) );
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_gecko = (agt.indexOf("gecko") != -1);

var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);

// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_aol5 = (agt.indexOf("aol 5") != -1);
var is_aol6 = (agt.indexOf("aol 6") != -1);

var is_opera = (agt.indexOf("opera") != -1);
var is_opera2=(agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
var is_opera3=(agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
var is_opera4=(agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
var is_opera5=(agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
var is_opera5up=(is_opera && !is_opera2 && !is_opera3 && !is_opera4);

var is_webtv = (agt.indexOf("webtv") != -1);

var is_TVNavigator = ((agt.indexOf("navio") != -1)
|| (agt.indexOf("navio_aoltv") != -1));
var is_AOLTV = is_TVNavigator;

var is_hotjava = (agt.indexOf("hotjava") != -1);
var is_hotjava3 = (is_hotjava && (is_major == 3));
var is_hotjava3up = (is_hotjava && (is_major <= 3));