Navigator 객체

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

Navigator

주로 크로스 브라우징(각 브라우져는 w3c, ECMA 의 표준을 맞추어 구현하지만 완전히 같지는 않을 수 있음)을 위해 사용
과거 웹표준이 명시되지 않았을 때 브라우져 마다 같은 기능을 수행하더라도 이름이 다름 브라우져 별로 분기하여 로직을 처리해야하는 문제가 발생(크로스 브라우징 이슈, 웹표준 이슈)
navigator 객체를 이용해 브라우져의 종류를 알 수 있음

console.dir()

console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.
console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.
구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

Navigator 프로퍼티

appName : 웹 브라우져의 이름
appVersion: 브라우져의 버전
userAgent: 브라우져가 서버측으로 전송하는 USER-AGENT-HTTP 헤더의 내용
platform: 브라우져가 동작하고 있는 운영체

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1>Navigator 객체</h1>
  <h2>appName</h2>
  <script>
    document.write(navigator.appName);
  </script>
  <h2>appVersion</h2>
  <script>
    document.write(navigator.appVersion);
  </script>
  <h2>userAgent</h2>
  <script>
    document.write(navigator.userAgent);
  </script>
  <h2>platform</h2>
  <script>
    document.write(navigator.platform);
  </script>
</body>
</html>

기능 테스트

브라우져가 어떠한 기능을 가지고 있는지 확인하는 기능
기능을 가지고있다면 그 기능을 사용하고, 없다면 기능을 추가해주는 역할을 수행

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
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;
    };
  }());
}

PreviousLocation 객체 Next창 제어

Last updated 3 years ago

Was this helpful?

Navigator

주로 크로스 브라우징(각 브라우져는 w3c, ECMA 의 표준을 맞추어 구현하지만 완전히 같지는 않을 수 있음)을 위해 사용

과거 웹표준이 명시되지 않았을 때 브라우져 마다 같은 기능을 수행하더라도 이름이 다름 브라우져 별로 분기하여 로직을 처리해야하는 문제가 발생(크로스 브라우징 이슈, 웹표준 이슈)

navigator 객체를 이용해 브라우져의 종류를 알 수 있음

console.dir()

console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.

console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.

구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

Navigator 프로퍼티

appName : 웹 브라우져의 이름

appVersion: 브라우져의 버전

userAgent: 브라우져가 서버측으로 전송하는 USER-AGENT-HTTP 헤더의 내용

platform: 브라우져가 동작하고 있는 운영체

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1>Navigator 객체</h1>
  <h2>appName</h2>
  <script>
    document.write(navigator.appName);
  </script>
  <h2>appVersion</h2>
  <script>
    document.write(navigator.appVersion);
  </script>
  <h2>userAgent</h2>
  <script>
    document.write(navigator.userAgent);
  </script>
  <h2>platform</h2>
  <script>
    document.write(navigator.platform);
  </script>
</body>
</html>

기능 테스트

브라우져가 어떠한 기능을 가지고 있는지 확인하는 기능

기능을 가지고있다면 그 기능을 사용하고, 없다면 기능을 추가해주는 역할을 수행

// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
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;
    };
  }());
}