JavaScript에서 사용자 에이전트 가져오기
이 기사에서는 에이전트의 목적을 설명하고 JavaScript 소스 코드에서 에이전트가 어떻게 작동하는지 알려줍니다. 또한 JavaScript 프로그램에서 사용자 에이전트를 얻는 방법도 확인합니다.
사용자 에이전트란?
사용자 에이전트는 네비게이터의 속성입니다. 브라우저에서 서버로 URL을 요청하는 동안 브라우저는 사용자 에이전트를 우리가 상호 작용하는 웹 사이트로 보냅니다.
사용자 에이전트는 브라우저 및 운영 체제 ID를 포함하는 문자열 또는 행입니다.
사용자 에이전트 필드는 HTTP 요청 헤더에 포함되며 해당 에이전트 필드 내용은 브라우저마다 다를 수 있습니다. 각 브라우저에는 특정 사용자 에이전트가 있습니다.
이 정보는 웹 서버가 이러한 서비스를 관리하여 다른 웹 브라우저나 운영 체제에 다른 웹 페이지를 제공하는 데 유용할 수 있습니다.
예를 들어 웹 서버는 모바일 웹 페이지를 모바일 브라우저로 보내거나 고급 웹 페이지를 고급 웹 브라우저로 보낼 수 있습니다. 또한 웹 서버는 사용자에게 브라우저 업데이트를 권장할 수도 있습니다.
다음은 사용자 에이전트 콘텐츠의 예입니다.
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041
JavaScript에서 사용자 에이전트 가져오기
JavaScript에서는 활성 브라우저 에이전트의 콘텐츠를 가져오는 사용자 지정 함수를 만들 수 있습니다. navigator 속성 userAgent의 도움으로 에이전트 콘텐츠 필드를 찾을 수 있으며 해당 속성은 읽기 전용입니다.
자바스크립트의 예:
<html>
<head>
<title>get agent in JavaScript</title>
</head>
<script>
function getAgent()
{
let agent = navigator.userAgent; //get agent from navigator property
document.getElementById("agent").innerHTML = "User-agent:<br>" + agent;
}
</script>
<body>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript Get Agent</h3>
<p>Click on button to get the agent</p>
<button onclick="getAgent()">Click me</button>
<p id="agent"></p>
</body>
</html>
출력:
위의 소스 코드에서 볼 수 있듯이 <script></script> 태그에 버튼 클릭 이벤트에 의해 트리거될 let 유형 함수 getAgent()를 선언했습니다.
해당 함수 내에서 navigator 속성 navigator.userAgent를 사용하여 사용자 에이전트 콘텐츠를 가져와 해당 문자열 값을 변수에 저장해야 합니다. 그런 다음 HTML 문서 기본 메서드 getElementById("agent").innerHTML을 사용하여 해당 변수를 단락 요소에 할당했습니다.
웹 페이지에 에이전트 콘텐츠를 표시하기 위해 Click me 단추 요소를 만들고 클릭 이벤트에서 getAgent() 함수를 호출했습니다.
위의 소스를 HTML 확장자로 저장하고 브라우저에서 열어 결과를 볼 수 있습니다.