Navigator 객체란?
현재 웹페이지가 실행 중인 브라우저에 대한 정보를 확인하고 싶다면, 자바스크립트에 기본적으로 내장된 navigator 객체를 활용하면 됩니다. 이 객체는 별도의 선언 없이 즉시 사용할 수 있으며, 다양한 메서드와 속성을 통해 브라우저의 이름, 버전, 운영체제, 언어 설정 등 유용한 정보를 제공합니다.
Navigator 객체의 주요 속성
- appName – 브라우저의 공식 이름
- appVersion – 브라우저의 버전 및 관련 세부 정보
- userAgent – 브라우저가 서버로 전송하는 User-Agent 문자열
- platform – 브라우저가 실행 중인 운영체제 플랫폼
- language – 브라우저에 설정된 언어
- cookieEnabled – 쿠키 사용 가능 여부(true/false)
예제 코드
아래 코드를 실행하면 navigator 객체를 이용해 현재 사용 중인 브라우저의 종류와 버전 정보를 화면에 출력할 수 있습니다.
<html>
<head>
<title>Navigator Object Example</title>
</head>
<body>
<script>
<!--
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera) {
document.write("Opera based browser");
// Keep your opera specific URL here.
}
else if (gecko) {
document.write("Mozilla based browser");
// Keep your gecko specific URL here.
}
else if (ie) {
document.write("IE based browser");
// Keep your IE specific URL here.
}
else if (netscape) {
document.write("Netscape based browser");
// Keep your Netscape specific URL here.
} else {
document.write("Unknown browser");
}
// You can include version to along with any above condition.
document.write("<br /> Browser version info : " + version );
//-->
</script>
</body>
</html>
코드 설명
위 예제에서는 먼저 navigator.userAgent 문자열에 특정 브라우저를 식별하는 키워드('Opera', 'MSIE', 'Gecko', 'Mozilla')가 포함되어 있는지 순서대로 검사합니다. 검사 결과에 따라 Opera 기반, Mozilla(Gecko) 기반, IE 기반, Netscape 기반 브라우저로 판별하고, 어느 조건에도 해당하지 않으면 'Unknown browser(알 수 없는 브라우저)'를 출력합니다.
또한 navigator.appVersion 값을 함께 출력해 브라우저의 세부 버전 정보까지 확인할 수 있으며, 필요하다면 위의 어떤 조건문과도 조합해 사용할 수 있습니다.
실무에서는 이러한 브라우저 감지(browser detection) 기법을 활용해 브라우저마다 최적화된 URL이나 기능을 분기 처리하는 데 유용하게 사용됩니다. 참고로 최신 개발 환경에서는 User-Agent 문자열 대신 기능 탐지(feature detection) 방식을 권장하는 경우가 많다는 점도 함께 기억해 두면 좋습니다.