JavaScript의 userAgent 속성을 사용하여 브라우저 유형을 결정하는 방법

브라우저 유형을 확인하려면 JavaScript에서 제공하는 Navigator 개체의 userAgent 속성을 사용할 수 있습니다. 이는 JavaScript를 실행하는 브라우저의 유형 및 버전과 같은 정보를 얻을 수 있는 유일한 속성입니다. 사용하기 편리하지만, 실수를 하면 브라우저의 순서 판단이 오류가 나기 쉬우므로 주의가 필요합니다.

userAgent 속성의 기본 구문을 살펴보겠습니다.

window.navigator.userAgent;

Through this 브라우저 정보를 설명하는 "문자열"을 반환 값으로 얻을 수 있습니다.

정보를 끝까지 문자열로 얻는 것이 포인트!

따라서 문자 정보에서 브라우저 종류와 버전을 추출하려면 indexOf() 등의 메소드를 사용해야 합니다.

브라우저 정보를 얻는 방법은 무엇인가요?

실제로 브라우저 종류를 가져오는 프로그램을 만들어 봅시다!

userAgent 속성에서 브라우저 정보를 가져오는 것부터 시작하세요.

//方法①
var agent = window.navigator.userAgent;
//方法②
var agent = window.navigator.userAgent.toLowerCase();

Method ① userAgent 속성을 평소대로 사용하지만, ② 마지막 실행은 toLowerCase()입니다.

실제로 얻은 브라우저 정보는 대문자와 소문자의 혼합된 문자열이므로 기본적으로 모두 소문자 또는 대문자로 만들어 놓는 것이 판단하기 쉽습니다.

그래서 일반적으로는 ②의 방법으로 적어보겠습니다!

var agent = window.navigator.userAgent.toLowerCase();
var result = agent.indexOf('chrome') > -1;
console.log(result);

이 예제에서는 indexOf()를 사용하여 브라우저 정보에서 얻은 "chrome"이라는 텍스트가 존재하는지 확인합니다.

그렇지 않으면 "-1"을 반환하고, 있으면 "문자 위치"를 반환합니다.

따라서 "> -1"의 비교를 통해 "참/거짓"을 얻을 수 있으므로 판단을 내릴 수 있습니다.

Browser Judgment

현재 "IE", "Chrome", "Safari", "Firefox" 등 다양한 브라우저가 있습니다. 대세 브라우저입니다

각 브라우저를 판단하는 방법을 살펴보겠습니다!

일반적으로 각 브라우저 이름은 기본적으로 IF 문을 통해 순서대로 판단됩니다.

var agent = window.navigator.userAgent.toLowerCase();
if(agent.indexOf('msie') > -1) { 
  console.log('IE浏览器'); 
} else if(agent.indexOf('edge') > -1) { 
  console.log('Edge浏览器');
} else if(agent.indexOf('chrome') > -1) {
  console.log('Chrome浏览器');
} else if(agent.indexOf('safari') > -1) {
  console.log('Safari浏览器');
} else if(agent.indexOf('firefox') > -1) {
  console.log('Firefox浏览器');
} else {
  console.log('其他浏览器');
}

이 예제에서는 userAgent를 사용하여 브라우저 정보를 가져오고 indexOf()는 각 브라우저 이름을 순서대로 결정합니다.

처음에 조금 소개해드렸는데 비교순서가 아주 중요해요!

실제로 userAgent 속성을 사용하여 Edge 브라우저를 검사하면 "chrome"과 "safari"라는 문자가 포함되어 있습니다.

또한 Chrome 브라우저에 'safari'라는 단어가 포함되어 있는지 확인하세요.

이렇듯 원래 브라우저와 이름이 다른 경우도 있기 때문에 먼저 조사 대상 브라우저를 비교해 볼 필요가 있습니다.

기본적으로는 '엣지' → '크롬' → '사파리' 순서는 보장하자!

위 내용은 JavaScript의 userAgent 속성을 사용하여 브라우저 유형을 결정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!