웹브라우저 JavaScript

Navigator 객체

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

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

console.dir(navigator);

주요한 프로퍼티를 알아보자.

appName

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

appVersion

브라우저의 버전을 의미한다. 필자의 현재 브라우저 정보는 아래와 같다.

"5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36"

userAgent

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

"5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36"

platform

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

"Win32"

기능 테스트

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

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

// 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;
    };
  }());
}

 

댓글

댓글 본문
  1. 드림보이
    수강완료했습니다...
  2. gkalsdlf
    ㅇㄹ!
  3. 박병진
    2020.12.02 완료
  4. 현미쓰
    11/16 복습 ㅎ.ㅎ
  5. 11/13
  6. nurunzii
    완료
  7. 완료
  8. 정승옥
    완료
  9. 김진욱
    완료
  10. 한강
    Navigation 객체 기능이 재미있네요.
    감사합니다~~^^!
    200624
  11. 쑤우
    완료. 감사합니다~
  12. Useok
  13. 준바이
    좋은 정보 감사합니다.
    대화보기
    • Gritter
      감사합니다.
    • student
      크로스 브라우징을 위해서

      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>

      를 쓰기도 하더군요. html5shiv 라는 프로젝트라고 하더라고요.
    • ㅎㅅㅁ
      200203 다시시작
    • 2019-10-13 8:46pm 완료
    • 정홍
      완료
    • 류석현
      수강완료!
    • JuicyFresh
      감사합니다
    • Lsalute
      크로싱 브라우징 할때 써야되는 객체로 보입니다..
      많이 고생하겠네요...
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      이건 어디에 써야할지 잘 이해가 안가네용 ㅠㅠ
    • 생선과고양이
      20180424 감사합니다
    • 수업 정말 감사합니다!
      appName에 Netscape인데 Nescape라고 나와있어요!
    • An TaeHyeon
      18-01-24 수강완료!
      강의록 공유합니다 :)
      https://goo.gl/GfpbW7
    • 띠링
      appName은 이제 익스,엣지도 크롬처럼 Netscape로 뜨네요.
      익스11, 엣지 41.x 씁니다.
      수업 잘 듣고 있습니다.
    • 박인호
      12-27
      수강완료.
    • Jayden贤宇
      이전에 Netscape와 IE브라우져 이 두 회사가 경쟁을 하면서 무질서하게 기능을 추가하기되는데. 그로인해 같은 기능을 각기 다른 브라우져에서 다른 코드를 작성해야되는 불편함이 생겼다. 그래서 W3C,ECMA 국제표준화기구가 출현해 질서를 바로 잡는다. 그로인해 이전과 같은 현상은 많이 해소되었지만, 표준화기구에서 세밀한부분은 표준화하기 힘들기에 각기 브라우져 회사마다 다른 부분이 아직도 남았다. 그런 현상을 ' 크로스브라우징(cross browsing)'이라 부르고, 각기 다른 브라우져의 호환성을 확인하기 위해 출현한게 'Navigator 객체' 이다.
      이렇게 이해하면..될까요 ?
    • 수복
      감사합니다.
    • 프로그래밍초보
      그냥저냥 넘어가라는 이고잉님의 말씀이 떠오르는 군요 ^^ 넘어갑니다~ㅋㅋㅋ
    • Sangmook Kim
      170727 완료
    • crable
      감사합니다.
    • BANIP
      언제나 좋은 강의 감사드립니다!
      요새 도서관에서 모던 자바스크립트를 빌려 깨작깨작 배우는데 저런 코드들이 수두룩하게 나와서 아직 제가 배울 단원은 아닌것 같더라구요.. 저런 코드들도 이해할 수 있을 만큼 공부해서 언젠가는 멋진 라이브러리 한개 만들어보고 싶네요!
    • 범이
      확실히 어려운감이 있습니다. 그런데 첫번째 강의에서 말씀하셨듯, html, css, javascript문법, 웹어플리케이션만들기 를 듣고 오셔야 이해가 빠릅니다. 그런데 어려운부분이 예를 들어서 document.getElementById 이런것들이 어려운것이라면 강의중반부에 설명해주시니 천천히 순서대로 들어보셔요. 저같은경우 개발경험이 있는데 아무것도 모르고 남의 코드 보고 개발했었는데 이고잉님의 강의를 들으니 '아 저런이유로 location을 썼구나' 이런감탄사가 나오긴하네요ㅎㅎ
      대화보기
      • 효효
        덕분에 대충 이런거지 했던 내용을 확실하게 파악할 수 있어서 좋았습니다.
        감사합니다~
      • 신입1
        복습중입니다 감사합니다.
      • matheios
        감사합니다... 아직 자바스크립트를 어떻게 공부해야 할지..잘모르겠어요... 우선 이고잉님의 강의를 듣고 있긴한데.. 어렵네요...ㅠㅠ
      • 폭스킴
        예전 댓글들을 보니까 논란이 조금 있었던 거 같은데,
        조금 더 심화학습을 하고 싶은 회원님들을 위해 마지막 코드를 설명해주시는 동영상 강의 하나 추가해주시면 좋을 거 같네요~
      • louislee
        후음.. 어려운 부분이네요
      • 히스토
        감사합니다
      • 유유
        감사합니다.
      • 감사합니다~!
      • hyuna
        감사합니다
      • 조병령
        감사합니다.
      • tachyon
        감사합니다
      • yihsang
        기능테스트코드는 다음에 봐야겠습니다.
        감사합니다.
      • JustStudy
        2016.07.07목
        고맙급니다 3.
      • JustStudy
        2016. 06. 30
        고맙습니다 2.
      • 이주환
        2016. 04. 27

        아마 마지막 기능테스트쪽 코딩때문에 댓글에 많은 글이 올라오고 있는 것 같은데 이고잉님께서 이 코드를 무조건 확인하고 이해할 수 있어야 한다. 라는 말씀은 없으셨던걸로 알고있습니다. 그렇기때문에 모든코드를 보고 이해하려하지마시고 넘어가셔서 좀더 지식을 쌓은 후 보시는걸 추천드립니다. js의 기초지식과 크로스브라우징에 관련된 내용은 이해관념으로 따졌을 때 전혀 다른것이기 때문이기에..
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기