> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 사용하여 브라우저와 버전을 안정적으로 감지하려면 어떻게 해야 합니까?

JavaScript를 사용하여 브라우저와 버전을 안정적으로 감지하려면 어떻게 해야 합니까?

Barbara Streisand
풀어 주다: 2024-12-04 17:00:15
원래의
804명이 탐색했습니다.

How Can I Reliably Detect Browser and Version Using JavaScript?

JavaScript의 브라우저 감지 재검토

JavaScript를 사용하여 정확한 브라우저와 버전을 확인하는 것은 맞춤형 웹 경험을 위한 귀중한 도구가 될 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

Navigator API:

JavaScript 내의 navigator 속성은 브라우저 정보에 대한 액세스를 제공합니다. userAgent 속성에는 브라우저와 버전을 식별하는 문자열이 포함되어 있습니다.

정규 표현식 사용:

userAgent 문자열에서 브라우저 이름과 버전을 추출하려면 다음을 수행하세요. 정규 표현식을 활용하세요. 다음 샘플 코드는 포괄적인 정규식을 사용하여 다양한 브라우저와 해당 버전을 감지합니다.

navigator.saysWho = (() => {
  const { userAgent } = navigator;
  let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  let temp;

  // Handle special cases
  if (/trident/i.test(match[1])) {
    temp = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
    return `IE ${temp[1] || ''}`;
  }

  if (match[1] === 'Chrome') {
    temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
    if (temp !== null) {
      return temp.slice(1).join(' ').replace('OPR', 'Opera');
    }

    temp = userAgent.match(/\b(Edg)\/(\d+)/);
    if (temp !== null) {
      return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)');
    }
  }

  // Construct the browser information string
  match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?'];
  temp = userAgent.match(/version\/(\d+)/i);
  if (temp !== null) {
    match.splice(1, 1, temp[1]);
  }

  return match.join(' ');
})();

console.log(navigator.saysWho); // outputs: `Chrome 89`
로그인 후 복사

이 스크립트는 사용자 에이전트 문자열을 다양한 브라우저 패턴과 일치시키고 추출된 브라우저 및 버전을 문자열로 반환합니다.

위 내용은 JavaScript를 사용하여 브라우저와 버전을 안정적으로 감지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿