> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 브라우저 감지

JavaScript의 브라우저 감지

Barbara Streisand
풀어 주다: 2025-01-29 14:33:13
원래의
591명이 탐색했습니다.

JavaScript 브라우저 감지 : 간단하고 효과적인 솔루션 Detecting Browsers in JavaScript 웹 페이지 개발에서 사용자의 브라우저 유형을 감지하는 것은 브라우저의 특정 버그, 응용 프로그램 호환성 수리 또는 최적화 성능을 처리하는 데 매우 도움이됩니다. 현대 개발은 브라우저 감지보다는 특징적인 탐지를 옹호하지만 사용자가 사용하는 브라우저를 이해하는 것은 여전히 ​​실용적입니다. 이 기사는

> 속성을 ​​사용하여 다른 브라우저를 감지하는 간단하고 효과적인 JavaScript 메소드를 탐색합니다.

userAgent 문자열을 이해하십시오 이 속성은 사용자 브라우저, 운영 체제 및 렌더링 엔진에 대한 자세한 정보를 제공합니다. 각 브라우저에는 고유 한 UserAgent 모드가 있으며 식별에 사용할 수 있습니다.

예를 들면 :

이에서 유용한 정보를 추출 할 수 있습니다. navigator.userAgent 다른 브라우저 감지 다음은 JavaScript를 사용하여 브라우저를 감지하는 간단한 방법입니다.

코드 자세한 설명

Microsoft Edge를 감지 :

window.navigator.userAgent

가장자리 브라우저의 UserAgent 문자열에는 "가장자리"가 포함되어 있습니다.

Google 크롬 감지 :
<code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code>
로그인 후 복사

Edge에는 "Chrome"도 포함되어 있으므로 테스트 외부에서 제외합니다.

사파리 감지 :

<code class="language-javascript">const userAgent = window.navigator.userAgent;
const isEdge = /Edge/.test(userAgent); // 检测Microsoft Edge
const isChrome = /chrome/i.test(userAgent) && !isEdge; // 检测Chrome,排除Edge
const isSafari = /safari/i.test(userAgent) && !isEdge; // 检测Safari,排除Edge
const isMobile = /mobile/i.test(userAgent); // 检测移动设备
const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); // 检测Windows 7上的Internet Explorer 11
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)); // 检测旧版Safari

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;</code>
로그인 후 복사

이것이 효과적인 이유는 Safari의 Usaragent 줄에 "Safari"가 포함되어 있기 때문에, 우리는 잘못 판단을 피하기 위해 Edge를 배제하기 때문입니다.
  1. 모바일 장치 감지 :
  2. 모바일 브라우저에는 일반적으로 Usaragent에 "모바일"이 포함되어 있습니다.
<code class="language-javascript">const isEdge = /Edge/.test(userAgent);</code>
로그인 후 복사
Windows 7에서 인터넷 익스플로러 감지 :

    Windows 7의 Usragent에는 "Wind
  1. 기존 버전의 사파리 감지 :
  2. 구식 버전의 useragent에는 "버전/8"또는 "버전/9"가 포함되어 있습니다.
<code class="language-javascript">const isChrome = /chrome/i.test(userAgent) && !isEdge;</code>
로그인 후 복사
특정 브라우저의 활성화 기능 :

    이 기능은이 기능이 모바일 장치에 사용되지 않고 Chrome, Safari 또는 Windows 7의 IE에서만 활성화되도록합니다.
  1. 전체 코드 예 결론 브라우저 감지를위한 UserAgent는 특성 감지가 불충분 할 때 매우 유용합니다. 그러나 점진적인 향상과 우아함을 사용하여 웹 애플리케이션이 모든 브라우저에서 정상적으로 실행될 수 있도록하는 것이 가장 좋습니다. 이 방법을 통해 웹 애플리케이션의 유연성을 유지하면서 브라우저의 특정 솔루션 또는 최적화를 구현할 수 있습니다. 프로젝트에서 브라우저 호환성 문제가 발생 했습니까? 의견에 당신의 생각을 나누는 데 오신 것을 환영합니다!

위 내용은 JavaScript의 브라우저 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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