HTML／CSS

[HTML/CSS] Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오기

teamnova 2023. 12. 29. 12:00
728x90

안녕하세요 오늘은 Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오는 방법에 대해서 알아보겠습니다.

 

해당 라이브러리는 다음과 같이 활용될 수 있습니다.

브라우저마다 지원하는 기능이 다르기 때문에, 라이브러리를 사용하여 사용자의 브라우저를 감지하여 호환되지 않는 기능을 대체하는 코드를 제공할 수 있습니다.

 

다음은 라이브러리를 사용한 간단한 예시 입니다.

test.html 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>브라우저 감지 예제</title>
<!-- Bowser 라이브러리를 CDN을 통해 포함 다운로드 받아서 사용 가능-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.min.js"></script>
</head>
<body>

<script>
// 문서가 로드되었을 때 실행되는 함수
document.addEventListener('DOMContentLoaded', (event) => {
  // Bowser를 사용하여 사용자의 브라우저 정보를 파싱
  const browser = bowser.getParser(window.navigator.userAgent);

  // 브라우저의 이름과 버전 정보를 추출
  const browserName = browser.getBrowserName();
  const browserVersion = browser.getBrowserVersion();

  // 추출한 정보를 사용자에게 알림으로 표시
  alert(`현재 사용 중인 브라우저는 ${browserName} 버전 ${browserVersion}입니다.`);
});
</script>

</body>
</html>

 

 

다음과 같은 결과물을 얻을 수 있습니다.