수색…
소개
브라우저는 진화하면서 더 많은 기능을 Javascript에 제공했습니다. 그러나 종종 이러한 기능은 모든 브라우저에서 사용할 수있는 것은 아닙니다. 때로는 하나의 브라우저에서 사용할 수 있지만 다른 브라우저에서 출시 될 수는 있습니다. 다른 경우 이러한 기능은 브라우저마다 다르게 구현됩니다. 브라우저 검색은 개발하는 응용 프로그램이 서로 다른 브라우저 및 장치에서 원활하게 실행되도록 보장하는 데 중요합니다.
비고
가능한 경우 기능 감지를 사용하십시오.
브라우저 검색을 사용하는 몇 가지 이유가 있습니다 (예 : 브라우저 플러그인을 설치하거나 캐시를 지우는 방법에 대한 사용자 지침 제공). 일반적으로 기능 감지는 모범 사례로 간주됩니다. 브라우저 검색을 사용하는 경우 브라우저가 절대적으로 구식인지 확인하십시오.
Modernizr 은 인기있는 가벼운 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';
// At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
성공적으로 테스트되었습니다 :
- Firefox 0.8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- 가장자리 - 20-25
Rob W의 신용
라이브러리 메소드
좀 더 쉬운 접근법은 기존의 JavaScript 라이브러리를 사용하는 것입니다. 이는 브라우저 탐지가 올바른지 보장하기가 까다로울 수 있기 때문에 가능한 해결책이 있으면 사용할 수있는 솔루션을 사용하는 것이 좋습니다.
인기있는 브라우저 감지 라이브러리는 Bowser 입니다.
사용 예 :
if (bowser.msie && bowser.version >= 6) {
alert('IE version 6 or newer');
}
else if (bowser.firefox) {
alert('Firefox');
}
else if (bowser.chrome) {
alert('Chrome');
}
else if (bowser.safari) {
alert('Safari');
}
else if (bowser.iphone || bowser.android) {
alert('Iphone or Android');
}
사용자 에이전트 탐지
이 메소드는 사용자 에이전트를 가져 와서 브라우저를 찾기 위해 구문 분석합니다. 브라우저 이름과 버전은 정규 표현식을 통해 사용자 에이전트에서 추출됩니다. 이 두 가지를 바탕으로 <browser name> <version> 이 반환됩니다.
사용자 에이전트 일치 코드 다음의 네 조건 블록은 다른 브라우저의 사용자 에이전트에서 차이점을 설명하기위한 것입니다. 예를 들어 오페라의 경우 Chrome 렌더링 엔진을 사용하므로 해당 부분을 무시하는 추가 단계가 있습니다.
이 방법은 사용자가 쉽게 스푸핑 할 수 있습니다.
navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
크레딧에 대한 크레딧