투케이2K

547. (javaScript) [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 엣시 Edge 인지 확인 수행 - isEdge 본문

JavaScript

547. (javaScript) [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 엣시 Edge 인지 확인 수행 - isEdge

투케이2K 2026. 6. 5. 13:12
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


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


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

  >> navigator.userAgent 는 👉 브라우저와 OS 정보를 담은 문자열입니다.

  >> navigator.userAgent 는 브라우저가 서버나 JS에게 "나는 이런 환경이야" 라고 알려주는 값입니다.

  >> navigator.userAgent 호출 시 표시 되는 예시 값 

    - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

  >> 주의점 : 

    - navigator.userAgent 는 사용자나 브라우저가 쉽게 변경 가능하며, 100% 신뢰는 불가능합니다.

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





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

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<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">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

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

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

    </style>





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






    <!-- [자바스크립트 코드 지정] -->
    <script>


      // -----------------------------------------------------------------
      // 🟦 [isEdge : 브라우저가 Edge 인지 판별]
      // -----------------------------------------------------------------            
      function isEdge() {
        try {

          const supported = typeof navigator !== "undefined" && typeof navigator.userAgent === "string";

          if (supported == true){

            const userAgent = navigator.userAgent.toLowerCase();

            console.log("[isEdge] : [userAgent] : ", userAgent);

            // --------------------------------------
            // ✔️ 구 Edge (EdgeHTML)는 "Edge/"였고, Chromium Edge는 "Edg/" 입니다
            // --------------------------------------
            // ✔️ mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/148.0.0.0 safari/537.36 edg/148.0.0.0
            // --------------------------------------

            const result = ( userAgent.includes("edg/") || userAgent.includes("edge/") );

            console.log("[isEdge] : [Result] : ", result);

            return result;
          }
          else {
            console.error("[isEdge] : [Error] : ❌ navigator not supported");

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

          return false;
        }        
      }




      // -----------------------------------------------------------------
      // 🟦 [Window.onload : 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // --------------------------------------
          // ✅ 브라우저 접속 환경이 엣지 브라우저 인지 확인 수행
          // --------------------------------------
          if (isEdge() == true){
            console.log("[window onload] : [isEdge] : 엣지 브라우저 입니다.");
          }
          else {
            console.log("[window onload] : [isEdge] : 엣지 브라우저가 아닙니다.");
          }

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

      };


    </script>


</head>


<body>

</body>

</html>

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





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

▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021


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

https://kkh0977.tistory.com/8735

https://blog.naver.com/kkh0977/224238606185


▶️ [간단 소스] 자바스크립트 ms-word 스키마 호출을 통해 워드 앱 실행 및 파일 열기 수행 - open word scheme file

https://blog.naver.com/kkh0977/224291736691

https://kkh0977.tistory.com/8840


▶️ [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

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

'JavaScript' 카테고리의 다른 글

549. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 식별 정보 확인 - getSha256Fingerprint  (0) 2026.06.06
548. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 만료 기간 유효성 검증 수행  (0) 2026.06.05
546. (javaScript) 자바스크립트 AWS Iot registerCertificateWithoutCA 사용해 클레임 인증서 등록 요청 수행 - 공통 클레임 인증서 사용  (0) 2026.06.04
545. (javaScript) [간단 소스] 자바스크립트 devicePixelRatio 및 body.style.zoom 브라우저 화면 확대 및 축소 비율 값 확인 및 변경 수행  (0) 2026.06.02
544. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 zxing 라이브러리 사용해 QR 및 바코드 스캔 카메라 팝업창 생성 수행  (0) 2026.06.02
'JavaScript' Related Articles more
Comments