본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] navigator 객체

navigator 객체

navigator 객체는 브라우저에 대한 정보를 가지고 있는 객체입니다.


navigator 객체

navigator 객체는 브라우저와 관련된 정보를 컨트롤 합니다. 브라우저에 대한 버전, 정보, 종류 등 관련된 정보를 제공합니다.

navigator.속성

navigator 객체 속성
종류 설명
navigator.appCodeName 브라우저의 코드명을 반환합니다.
navigator.appName 브라우저의 이름을 반환합니다.
navigator.appVersion 브라우저의 버전을 반환합니다.
navigator.cookieEnabled 브라우저의 쿠키 사용 가능 여부를 반환합니다.
navigator.language 브라우저에서 사용되는 언어를 반환합니다.
navigator.onLine 브라우저가 온라인인지 여부를 반환합니다.
navigator.platform 브라우저가 실행되는 플랫폼 정보를 반환합니다.
navigator.product 브라우저에서 사용되는 엔진 이름을 반환합니다.
navigator.userAgent 브라우저와 운영체제 정보를 반환합니다.

Sample1

브라우저 주소와 관련된 예제입니다.

결과
브라우저의 코드명[navigator.appCodeName] : Mozilla
브라우저의 이름[navigator.appName] : Netscape
브라우저의 버전[navigator.appVersion] : 5.0 (Macintosh; Intel Mac OS X 10_15_0)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
쿠키 사용 가능 여부[navigator.cookieEnabled] : true
브라우저에서 사용되는 언어[navigator.language] : ko-KR
온라인인지 여부[navigator.onLine] : true
플랫폼 정보[navigator.platform] : MacIntel
엔진 이름[navigator.product] : Gecko
운영체제 정보[navigator.userAgent] : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
html
<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <title>nviagtor</title>
    <script>
        var nowAppCodeName = navigator.appCodeName;
        var nowAppName = navigator.appName;
        var nowAppVersion = navigator.appVersion;
        var nowCookieEnabled = navigator.cookieEnabled;
        var nowLanguage = navigator.language;
        var nowOnLine = navigator.onLine;
        var nowPlatform = navigator.platform;
        var nowProduct = navigator.product;
        var nowUserAgent = navigator.userAgent;
        
        document.write("브라우저의 코드명[navigator.appCodeName] : " + nowAppCodeName, "<br>");
        document.write("브라우저의 이름[navigator.appName] : " + nowAppName, "<br>");
        document.write("브라우저의 버전[navigator.appVersion] : " + nowAppVersion, "<br>");
        document.write("쿠키 사용 가능 여부[navigator.cookieEnabled] : " + nowCookieEnabled, "<br>");
        document.write("브라우저에서 사용되는 언어[navigator.language] : " + nowLanguage, "<br>");
        document.write("온라인인지 여부[navigator.onLine] : " + nowOnLine, "<br>");
        document.write("플랫폼 정보[navigator.platform] : " + nowPlatform, "<br>");
        document.write("브라우저 엔진 이름[navigator.product] : " + nowProduct, "<br>");
        document.write("운영체제 정보[navigator.userAgent] : " + nowUserAgent, "<br>");
    </script>
</head>
<body>
    
</body>
</html>

Sample2

브라우저 주소와 관련된 예제입니다.

결과
현재 맥을 사용하고 있으며 화면 크기는 1680x1050px입니다.
html
<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <title>운영체제 정보와 화면 크기 알아내기</title>
</head>
<body>
    <div id="info"></div>
    
    <script>
        var os = navigator.userAgent.toLowerCase();
        var sw = screen.width;
        var sh = screen.height;
        var info = document.getElementById("info");

        if(os.indexOf('windows') >= 0){
            info.innerHTML = "현재 윈도우를 사용하고 있으며 화면 크기는 "+ sw + "x" +sh+ "px입니다.";
        } else if(os.indexOf('macintosh') >= 0){
            info.innerHTML = "현재 맥을 사용하고 있으며 화면 크기는 "+ sw + "x" +sh+ "px입니다.";
        } else if(os.indexOf('iphone') >= 0){
            info.innerHTML = "현재 아이폰을 사용하고 있으며 화면 크기는 "+ sw + "x" +sh+ "px입니다.";
        } else if(os.indexOf('android') >= 0){
            info.innerHTML = "현재 안드로이드 폰을 사용하고 있으며 화면 크기는 "+ sw + "x" +sh+ "px입니다.";
        }
    </script>
</body>
</html>

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
navigator.appCodeName 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.appName 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.appVersion 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.cookieEnabled 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.language 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.onLine 사용가능 사용가능 사용가능 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.platform 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.product 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
navigator.userAgent 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN JavaScript

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기