투케이2K

522. (javaScript) [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 크롬 chrome 인지 확인 수행 - isChrome 본문

JavaScript

522. (javaScript) [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 크롬 chrome 인지 확인 수행 - isChrome

투케이2K 2026. 4. 2. 19:02
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / navigator.userAgent / isChrome


- 사전) 👉 navigator.userAgent 간편 설명 : 

  >> navigator.userAgent 는 브라우저가 서버 또는 스크립트에 '나는 어떤 브라우저/장치/운영체제다' 라는 정보를 전달하기 위한 문자열입니다.

  >> navigator.userAgent 는 모바일/태블릿/PC 구분 등 사용자 경험 최적화에 활용됩니다.

  >> navigator.userAgent 는 스푸핑(spoofing) 가능하며, 브라우저가 UA 문자열을 임의로 바꿀 수 있습니다.

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
          width: 100%;
          height: 100%;
          margin : 0 auto;
          padding : 0;
          border : none;
          background-color: #666;
        }



        
        .toast-full {
          width: 100% !important;
          max-width: 100% !important;   /* ✅ 핵심: 기본 max-width 제거 */
          left: 0 !important;
          transform: none !important;
          border-radius: 0 !important;
        }


    </style>





    <!-- [CDN 주소 설정] -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">
        
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {         
          
          // -----------------------------------------------
          // 1) navigator.userAgent 지원 여부를 체크
          // -----------------------------------------------
          // ✔️ navigator.userAgent 는 브라우저가 서버 또는 스크립트에 '나는 어떤 브라우저/장치/운영체제다' 라는 정보를 전달하기 위한 문자열입니다.
          // -----------------------------------------------
          if ("userAgent" in navigator) {
            console.log("navigator.userAgent supported : ✅ 지원 및 접근 가능");
            

            // -----------------------------------------------
            // 2) navigator.userAgent 정보 확인
            // -----------------------------------------------
            // ✔️ 크롬 브라우저 접속 예시 : mozilla/5.0 (linux; android 6.0; nexus 5 build/mra58n) applewebkit/537.36 (khtml, like gecko) chrome/146.0.0.0 mobile safari/537.36
            // -----------------------------------------------
            // ✔️ 엣지 브라우저 접속 예시 : mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/146.0.0.0 safari/537.36 edg/146.0.0.0
            // -----------------------------------------------
            const userAgent = navigator.userAgent.toLowerCase();

            console.log('userAgent info : ', userAgent);


            // -----------------------------------------------
            // 3) 접속한 브라우저 체크 수행 : Chrome 이면서 Edge(Edg), Opera(OPR), SamsungBrowser 는 제외 처리
            // -----------------------------------------------
            // ✔️ Edge (Chromium) , Opera (Chromium) , Samsung Browser (Chromium 기반) 브라우저들은 크로미움 엔진 기반으로 User-Agent에 "chrome" 문자열이 포함됩니다.
            // -----------------------------------------------
            // ✔️ Safari / Firefox는 기본적으로 User-Agent 문자열에 "chrome"을 포함하지 않기 때문에, 일치하지 않는 브라우저는 자동으로 제외됩니다.
            // -----------------------------------------------            
            const isChrome = userAgent.includes("chrome") && !userAgent.includes("edg") && !userAgent.includes("opr") && !userAgent.includes("samsungbrowser");

            console.log('isChrome : ', isChrome);
          }
          else {
            console.log("navigator.userAgent supported : ❌ 미지원 또는 접근 불가");
          }

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[navigator (네비게이터) 사용해 브라우저 정보 확인 실시 - userAgent , cookieEnabled]

https://kkh0977.tistory.com/853

https://blog.naver.com/kkh0977/222393616945?trackingCode=blog_bloghome_searchlist


[navigator platform 사용해 pc 및 모바일 접속 확인, navigator userAgent 사용해 접속한 모바일 종류 확인]

https://kkh0977.tistory.com/873

https://blog.naver.com/kkh0977/222399340657?trackingCode=blog_bloghome_searchlist


[navigator userAgent 사용해 접속한 브라우저 (browser) 확인 실시]

https://kkh0977.tistory.com/835

https://blog.naver.com/kkh0977/222390704241?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

524. (javaScript) [간단 소스] 자바스크립트 getMacFormat - 맥 주소 (Mac Address) 형식에 맞게 세미콜론 자릿수 포맷 함수  (0) 2026.04.07
523. (javaScript) [간단 소스] 자바스크립트 getCallNumFormat - 휴대폰 번호 및 지역 전화 번호 형식 문자열 포맷 함수  (0) 2026.04.07
521. (javaScript) [간단 소스] 자바스크립트 window.opener.postMessage Cross-window 팝업창 데이터 통신 방식 설명 정리  (0) 2026.04.01
520. (javaScript) [간단 소스] 자바스크립트 동적 스크립트 작성 및 window.open 시 window.opener.postMessage 부모에서 자식 데이터 전송  (0) 2026.04.01
519. (javaScript) 자바스크립트 Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 Toast Message 기본 스타일 지정 및 표시 수행  (0) 2026.03.30
'JavaScript' Related Articles more
Comments