JavaScript에서 브라우저를 감지하는 방법

5415 단어 detectbrowserprogrammingjavascriptwebdev


안녕 친구들, 오늘 이 블로그에서 CodeWithNepal에 오신 것을 환영합니다. JavaScript로 빌드Browser Detector하는 방법을 배우게 됩니다. 사용자 브라우저를 감지하기 위해 HTML CSS 및 JavaScript만 사용하겠습니다. 이전 블로그에서 Word Guessing Game을 공유했으며 이제 JavaScript에서 브라우저를 감지하는 간단한 프로그램을 만들 차례입니다.

이 작은 프로젝트( Detect Browser )에는 프로젝트의 미리보기 이미지 내에서 볼 수 있듯이 Google Chrome, Mozilla Firefox, Microsoft Edge 등의 특수 브라우저 상표가 있는 '브라우저' 텍스트 콘텐츠가 있습니다.

이제 각 브라우저의 모든 로고가 완전히 불투명한 것을 볼 수 있지만 지정된 브라우저에서 현재 HTML 페이지를 열면 현재 사용 중인 브라우저 로고 하나를 제외한 모든 로고가 약간 희미해집니다.

브라우저를 감지하기 위해 JavaScript 내비게이터 개체를 사용했습니다. 이 네비게이터 개체에는 다음 브라우저를 감지하는 데 사용되는 브라우저에 대한 정보가 포함되어 있습니다. 이 JavaScript 개체는 브라우저 감지와 브라우저와 관련된 다양한 정보를 얻는 데 사용됩니다. 마찬가지로 브라우저를 감지하려면 주어진 지침을 따르십시오.

당신은 이것을 좋아할 것입니다:
  • Website Builder in 2022.
  • Snake JavaScript
  • Personal Portfolio Website
  • Word Guessing Game

    • JavaScript에서 브라우저 감지



    처음에는 모든 브라우저 로고에 opacity 0.3을 주고 JavaScript에서는 navigator.UserAgent 객체를 이용하여 브라우저에 대한 정보를 얻은 다음 if/else if 문을 사용하여 내가 찾은 브라우저 정보에서 특정 문자열(브라우저 이름)을 일치시켰습니다. 최근에 navigator.userAgent를 사용했습니다.

    주어진 문자열이 일치하면 브라우저 변수에 브라우저 이름을 전달했습니다. 이제 사용자가 어떤 브라우저를 사용하고 있는지 알 수 있습니다. 받은 후 IMG 태그인 이 브라우저 클래스 이름을 선택하고 불투명도를 1로 지정했습니다.

    1 단계

    처음에는 HTML(.html) 및 CSS(.css) 파일 두 개를 만들어야 합니다. 이러한 파일을 생성한 후 VS IDE 코드 샘플에 다음 코드를 붙여넣기만 하면 됩니다. index.html이라는 HTML 파일을 만들고 표시된 코드를 HTML 파일(.html)에 붙여넣습니다. 확장명이 있는 파일을 만들어야 합니다. HTML.

    <!DOCTYPE html>
<!-- Coding By CodeWithNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Detect Browser in JavaScript | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <h2>Browser:</h2>
      <div class="logos">
        <img class="chrome" src="logos/chrome.png" alt="chrome" title="Google Chrome">
        <img class="firefox" src="logos/firefox.png" alt="firefox" title="Mozilla Firefox">
        <img class="edge" src="logos/edge.png" alt="edge" title="Microsoft Edge">
        <img class="opera" src="logos/opera.png" alt="opera" title="Opera">
        <img class="safari" src="logos/safari.png" alt="safari" title="Apple Safari">
      </div>
    </div>

    <script>
      let userAgent = navigator.userAgent;
      let browser;
      if(userAgent.match(/edg/i)){
        browser = "edge";
      }else if(userAgent.match(/firefox|fxios/i)){
        browser = "firefox";
      }else if(userAgent.match(/opr\//i)){
        browser = "opera";
      }else if(userAgent.match(/chrome|chromium|crios/i)){
        browser = "chrome";
      }else if(userAgent.match(/safari/i)){
        browser = "safari";
      }else{
        alert("Other browser");
      }
      const logo = document.querySelector(`.logos .${browser}`);
      if(logo){
        logo.style.opacity = "1";
      }
    </script>

  </body>
</html>


    2 단계

    그리고 style.css라는 CSS 파일을 만들고 표시된 코드를 CSS 파일에 붙여넣습니다. .css 파일을 만들어야 합니다.

    /* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#252930 50%, #b75afe 50%);
}
::selection{
  color: #fff;
  background: #b75afe;
}
.wrapper{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 30px 40px;
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}
.wrapper h2{
  color: #b75afe;
  font-size: 46px;
}
.wrapper .logos{
  margin-left: 15px;
}
.logos img{
  opacity: 0.3;
  margin: 0 7px;
  transition: opacity 0.4s ease;
}
.logos img:last-child{
  margin-right: 0px;
}


    이상입니다. 이제 JavaScript에서 Detect Browser를 성공적으로 빌드했습니다. 코드가 작동하지 않거나 문제가 발생한 경우 자유롭게 의견을 남겨주세요. 소스 코드 파일을 제공하겠습니다.
    Qiita는 `# d3e173`처럼 쓰면 오른쪽에 색이 표시된다는 것을 알고 있었습니까?
    Discord용 맞춤 CSS

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage