Navigator 객체

Navigator 객체란

브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해서 사용

 

 

크로쓰브라우징(cross browsing)

익스플로러, 파이어폭스, 크롬, 사파리 등 인터넷브라우저는 W3X(HTML, CSS)  , ECMA(자바스크립) 국제표준화 기구에

웹표준 규제에 따라서 만들어짐 이는 다양한 컴퓨터 환경이나 브라우저 정보를 동일하게 표현하기 위해 필요함

 

 

해당 명령을 통해서 이객체의 모든 프로퍼티를 열람할 수 있다.

 

appName : 웹브라우저의 이름 IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시

 

appVersion : 브라우저의 버전을 의미

 

 

userAgent : appVersion 내용과 비슷할수 있으나 브라우저가 서버측으로 전송하는  USER-AGENT HTTP 헤더의 내용이다.

 

 

platform : 브라우저가 동작하고 있는 운영체제에 대한 정보

 

 

 

 

 

 

기능 테스트

Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니므로 아래와 같이 기능 테스트를 사용하는 것이 더 선호

 

 

예를 들어 Object.keys라는 메소드는 객체의 key 값을 배열로 리턴하는 Object의 메소드다. 이 메소드는 ECMAScript5에 추가되었기 때문에 오래된 자바스크립트와는 호환되지 않는다. 아래의 코드를 통해서 호환성을 맞출 수 있음

 

<script>
    if (!Object.keys) {
        Object.keys = (function () {
            'use strict';
            var hasOwnProperty = Object.prototype.hasOwnProperty,
                hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
                dontEnums = [
                    'toString',
                    'toLocaleString',
                    'valueOf',
                    'hasOwnProperty',
                    'isPrototypeOf',
                    'propertyIsEnumerable',
                    'constructor'
                ],
                dontEnumsLength = dontEnums.length;

            return function (obj) {
                if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
                    throw new TypeError('Object.keys called on non-object');
                }

                var result = [], prop, i;

                for (prop in obj) {
                    if (hasOwnProperty.call(obj, prop)) {
                        result.push(prop);
                    }
                }

                if (hasDontEnumBug) {
                    for (i = 0; i < dontEnumsLength; i++) {
                        if (hasOwnProperty.call(obj, dontEnums[i])) {
                            result.push(dontEnums[i]);
                        }
                    }
                }
                return result;
            };
        }());
    }
</script>

if (!Object.keys) 앞에 !은 부정

만약에 Object라는 객체가 keys는 메소드를 가지고 있지 않다면  해당 if조건문 실행 ( 해당 기능 실행 ) 

저 메소드를 가지고 있는 브라우저는 브라우저에 내장된 메소드 사용하게 둠

( 브라우저에 내장되어 있는거 사용하는게 정식이기 때문에 ) 

하지만 해당 코드로 브라우저마다 다르게 동작하는 부분들을 해당 코드가 보정해 줄 순 없음

만약에 브라우저 마다 다르게 동작하는 기능이 있다면 Navigator 객체를 통해서 

그 브라우저 종류를 알게되고 이런 조건문으로 브라우저마다 다르게 동작 할수있도록 해야됨