HTML의 navigator.userAgent 속성은 브라우저가 서버에 요청을 보낼 때 함께 전송되는 User-Agent 헤더의 값을 반환합니다. 이 속성을 활용하면 현재 접속 중인 브라우저의 종류, 버전, 운영체제 등의 정보를 자바스크립트로 손쉽게 확인할 수 있습니다.
문법(Syntax)
navigator.userAgent 속성의 기본 문법은 다음과 같습니다.
navigator.userAgent
별도의 매개변수 없이 호출하며, 반환값은 브라우저가 서버로 전송한 user-agent 헤더 문자열입니다.
예제(Example)
아래 예제는 버튼을 클릭하면 현재 브라우저의 user-agent 헤더 값을 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
color: #fff;
}
</style>
<body>
<h1>HTML navigator userAgent property Demo</h1>
<button class="btn" onclick="display()">Show user-agent header value</button>
<div class="show"></div>
<script>
function display() {
document.querySelector(".show").innerHTML = "<p>Browser user-agent header value is:</p>" + "<p>" + navigator.userAgent + "</p>";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같이 그라데이션 배경 화면과 함께 [Show user-agent header value] 버튼이 표시됩니다.
버튼을 클릭하면 아래와 같이 현재 브라우저가 전송하는 user-agent 헤더 값이 화면에 출력됩니다.
참고 사항
userAgent 속성으로 반환되는 문자열은 브라우저마다 형식이 다르며, Chrome, Firefox, Safari, Edge 등 각 브라우저의 이름과 버전, 운영체제 정보를 포함합니다. 다만 최신 브라우저에서는 개인정보 보호를 위해 일부 정보가 축소되어 제공될 수 있으므로, 브라우저 감지(browsing detection)보다는 기능 감지(feature detection) 방식을 함께 고려하는 것이 좋습니다.