JavaScript에서 브라우저 유형을 안정적으로 감지하는 방법은 무엇입니까?

브라우저 유형을 안정적으로 감지하는 방법

브라우저별 확장 프로그램을 개발할 때 사용자의 브라우저를 정확하게 식별하는 것이 중요합니다. 각 브라우저에 올바른 애드온을 제공하려면 브라우저 유형을 감지하는 것이 중요합니다.

문제 감지 방법

일반적인 접근 방식 중 하나는 사용자 에이전트 문자열을 확인하는 것입니다. 그러나 이 방법은 공격자가 이 값을 쉽게 스푸핑할 수 있기 때문에 신뢰할 수 없습니다. 따라서 보다 안정적인 기술을 사용할 필요가 있습니다.

브라우저 덕 타이핑

덕 타이핑은 브라우저 감지에 있어 보다 안정적인 방법입니다. 다음은 이 접근 방식을 사용하는 JavaScript 코드 조각입니다.

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

기능 감지와 브라우저 감지

가능한 경우 브라우저 감지보다 기능 감지를 선택하세요. 기능 감지에는 특정 기능이나 개체가 존재하는지 확인하는 작업이 포함되어 더욱 안정적이고 브라우저 독립적인 접근 방식을 제공합니다.

사용 예

브라우저 감지 코드를 활용하려면 다음을 따르세요. 단계:

1. 코드 조각을 JavaScript 파일에 배치하세요.
2. 사용 isBrowserName 변수를 사용하여 브라우저 유형을 결정합니다.
3. 브라우저 유형에 따라 사용자를 적절한 애드온 다운로드 페이지로 리디렉션합니다.

브라우저 감지는 필요한 경우에만 드물게 사용하는 것을 기억하세요. , 예를 들어 브라우저별 설치 지침을 표시합니다. 기능 감지는 호환성을 보장하고 사용자 경험을 최적화하기 위한 기본 도구입니다.

위 내용은 JavaScript에서 브라우저 유형을 안정적으로 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!