[JS] 접속한 브라우저 체크하기

 

예시코드

 

전체 코드

function getBrowser() {
  const browsers = [
    'Chrome', 'Opera',
    'WebTV', 'Whale',
    'Beonex', 'Chimera',
    'NetPositive', 'Phoenix',
    'Firefox', 'Safari',
    'SkipStone', 'Netscape', 'Mozilla',
  ];

  const userAgent = window.navigator.userAgent.toLowerCase();

  if (userAgent.includes("edg")) {
    return "Edge";
  }

  if (userAgent.includes("trident") || userAgent.includes("msie")) {
    return "Internet Explorer";
  }

  return browsers.find((browser) => userAgent.includes(browser.toLowerCase())) || 'Other';
}

getBrowser();
// Chrome

 

코드 풀이

// 브라우저 모음
const browsers = [
  'Chrome', 'Opera',
  'WebTV', 'Whale',
  'Beonex', 'Chimera',
  'NetPositive', 'Phoenix',
  'Firefox', 'Safari',
  'SkipStone', 'Netscape',
  'Mozilla',
];

자주 이용되는 브라우저 데이터를 배열에 담아 미리 정의해 줍니다.

 

const userAgent = window.navigator.userAgent.toLowerCase();

navigator.userAgent 정보에는 현재 접속한 브라우저에 대한 정보가 담겨있습니다.

 

해당 정보에서 'Chrome'과 같은 특정한 단어가 포함되어 있는지를 찾는 방식을 사용해 줍니다.

 

if (userAgent.includes("edg")) {
  return "Edge";
}

if (userAgent.includes("trident") || userAgent.includes("msie")) {
  return "Internet Explorer";
}

미리 선언해 둔 배열을 사용하기 전에, 에지와 익스플로러는 userAgent의 명칭과 다름으로 예외적으로 처리해줘야 합니다.

 

return browsers.find((browser) => userAgent.includes(browser.toLowerCase())) || 'Other';

브라우저를 모아둔 배열에서 포함되어 있는 브라우저를 찾으면 해당 값을 반환해 주고, 찾지 못하면 'Other'을 반환해 줍니다.