FF, Chrome, IE, Opera 및 Safari에 5 개의 애드온 / 확장 프로그램이 있습니다.
사용자 브라우저를 인식하고 설치 단추를 클릭 한 후 해당 애드온을 다운로드하도록 리디렉션하려면 어떻게해야합니까?
답변
브라우저의 안정적인 검색을위한 인터넷 검색은 종종 사용자 에이전트 문자열을 확인합니다. 이 방법은 이 값을 스푸핑하는 것이 쉽지 않기 때문에 신뢰할 수 없습니다 . duck-typing하여
브라우저를 감지하는 방법을 작성했습니다 .
확장 기능을 설치하기위한 브라우저 별 지침을 표시하는 등 브라우저 검색 방법이 꼭 필요한 경우에만 사용하십시오. 가능하면 기능 감지를 사용하십시오.
데모 : https://jsfiddle.net/6spj1059/
// 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' && 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;
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;신뢰성 분석
이전 방법 렌더링 엔진 (의 특성에 의존 -moz-box-sizing하고 -webkit-transform) 브라우저를 검출한다. 이러한 접두사는 결국 삭제되므로 검색을 더욱 강력하게하기 위해 브라우저 별 특성으로 전환했습니다.
- Internet Explorer : JScript의 조건부 컴파일 (IE9까지) 및
document.documentMode. - Edge : Trident 및 Edge 브라우저에서 Microsoft의 구현은
StyleMedia생성자를 노출합니다 . 트라이던트를 제외하면 Edge가 남습니다. - Edge (크롬 기반) : 사용자 에이전트는 끝에 “Edg / [version]”값을 포함합니다 (예 : “Mozilla / 5.0 (Windows NT 10.0; Win64; x64)) AppleWebKit / 537.36 (Gcko와 같은 KHTML) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 “).
- Firefox : 애드온을 설치하는 Firefox의 API :
InstallTrigger - Chrome :
chrome문서화 된chrome.webstore객체를 포함하여 여러 속성이 포함 된 전역 객체입니다. chrome.webstore최신 버전에서는 업데이트 3 이 더 이상 사용되지 않고 정의되지 않았습니다.- Safari : 생성자의 이름을 지정하는 고유 한 이름 지정 패턴입니다. 이것은 나열된 모든 속성 중 가장 내구성이 떨어지는 방법이며 무엇을 추측합니까? Safari 9.1.3에서는 수정되었습니다. 따라서
SafariRemoteNotification버전 7.1 이후에 도입 된을 (를) 확인하여 3.0 이상의 모든 Safari를 포함합니다. - Opera :
window.opera수년간 존재했지만 Opera가 엔진을 Blink + V8 (Chromium에서 사용)로 교체하면 삭제 됩니다. - 업데이트 1 : Opera 15가 출시 되었으며 UA 문자열은 Chrome처럼 보이지만 “OPR”이 추가되었습니다. 이 버전에서는
chrome객체가 정의되지만chrome.webstore그렇지 않습니다. Opera는 Chrome 복제를 시도하기 때문에이 목적으로 사용자 에이전트 스니핑을 사용합니다. - 업데이트 2 : Opera 20+ (상록)
!!window.opr && opr.addons를 감지하는 데 사용할 수 있습니다 . - 깜박임 : Google이 Chrome 28
CSS.supports()을 켠 후 깜박임에 도입되었습니다. 물론 오페라에서 사용되는 것과 같은 깜박임입니다.
다음에서 성공적으로 테스트되었습니다.
- 파이어 폭스 0.8-61
- 크롬 1.0-71
- 오페라 8.0-34
- 사파리 3.0-10
- IE 6-11
- 가장자리-20-42
- 에지 개발-80.0.361.9
9.1.3 이상의 Safari 브라우저 감지 기능을 포함하도록 2016 년 11 월에 업데이트되었습니다.
크롬, 파이어 폭스 IE 및 엣지에서 최신의 성공적인 테스트를 업데이트하기 위해 2018 년 8 월에 업데이트되었습니다.
크롬 감지를 수정하고 (window.chrome.webstore 지원 중단으로 인해) Chrome에서 최신의 성공적인 테스트를 포함하도록 2019 년 1 월에 업데이트되었습니다.
Chromium 감지 (@Nimesh 주석 기반)를 기반으로 Edge를 추가하도록 2019 년 12 월에 업데이트되었습니다.
답변
브라우저 버전을 확인하는 방법은 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<p>What is the name(s) of your browser?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
{
alert('Opera');
}
else if(navigator.userAgent.indexOf("Chrome") != -1 )
{
alert('Chrome');
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
alert('Safari');
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
alert('Firefox');
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
alert('IE');
}
else
{
alert('unknown');
}
}
</script>
</body>
</html>
그리고 IE 브라우저 버전 만 알아야한다면 아래 코드를 따르십시오. 이 코드는 IE6 ~ IE11 버전에서 잘 작동합니다.
<!DOCTYPE html>
<html>
<body>
<p>Click on Try button to check IE Browser version.</p>
<button onclick="getInternetExplorerVersion()">Try it</button>
<p id="demo"></p>
<script>
function getInternetExplorerVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var rv = -1;
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
//For IE 11 >
if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
alert(rv);
}
}
else {
alert('otherbrowser');
}
}
else {
//For < IE11
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
return false;
}}
</script>
</body>
</html>
답변
나는 그것을 위해 lib를 사용하는 것이 과잉 일 수 있다는 것을 알고 있지만 스레드를 풍부하게하기 위해 is.js 방법을 확인할 수 있습니다 .
is.firefox();
is.ie(6);
is.not.safari();
답변
2019 년 12 월 현재 브라우저 감지를 처리하는 몇 가지 주요 라이브러리가 있습니다.
lancedikson의 Bowser -4,065 ★ s-마지막 업데이트 날짜 : 2019 년 10 월 2 일-4.8KB
var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
" v" + result.parsedResult.browser.version +
" on " + result.parsedResult.os.name);<script src="https://unpkg.com/bowser@2.7.0/es5.js"></script>* Chromium 기반 Edge 지원
bestiejs의 Platform.js -2,550 ★ s-마지막 업데이트 날짜 : 2019 년 4 월 14 일-5.9KB
console.log(platform);
document.write("You are using " + platform.name +
" v" + platform.version +
" on " + platform.os);<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>gabceb의 jQuery Browser -504 ★ s-최종 업데이트 2015 년 11 월 23 일-1.3KB
console.log($.browser)
document.write("You are using " + $.browser.name +
" v" + $.browser.versionNumber +
" on " + $.browser.platform);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>darcyclarke의 Detect.js (아카이브) -522 ★ s-마지막 업데이트 2015 년 10 월 26 일-2.9KB
var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
" v" + result.browser.version +
" on " + result.os.family);<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>QuirksMode의 브라우저 검색 (아카이브) -마지막 업데이트 2013 년 11 월 14 일-884B
console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
" v" + BrowserDetect.version +
" on " + BrowserDetect.OS);<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>주목할만한 언급 :
- WhichBrowser -1,355 ★ s-마지막 업데이트 2018 년 10 월 2 일
- Modernizr -23,397 ★ s-2019 년 1 월 12 일에 마지막 업데이트-먹이를 먹이려면 피처 감지 기능이 canIuse 스타일 질문을 유발 해야합니다 . 브라우저 감지는 실제로 사용자 지정된 이미지, 다운로드 파일 또는 개별 브라우저에 대한 지침을 제공하기위한 것입니다.
추가 자료
답변
누군가이 기능이 유용하다고 생각되면 Rob W의 대답 을 여러 변수가 떠있는 대신 브라우저 문자열을 반환하는 함수로 만들었습니다 . 브라우저는 다시로드하지 않고 실제로는 변경할 수 없으므로 다음에 함수를 호출 할 때 결과를 해결할 필요가 없도록 결과를 캐시했습니다.
/**
* Gets the browser name or returns an empty string if unknown.
* This function also caches the result to provide for any
* future calls this function has.
*
* @returns {string}
*/
var browser = function() {
// Return cached result if avalible, else get result then cache it.
if (browser.prototype._cachedResult)
return browser.prototype._cachedResult;
// 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'] || safari.pushNotification);
// 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;
return browser.prototype._cachedResult =
isOpera ? 'Opera' :
isFirefox ? 'Firefox' :
isSafari ? 'Safari' :
isChrome ? 'Chrome' :
isIE ? 'IE' :
isEdge ? 'Edge' :
isBlink ? 'Blink' :
"Don't know";
};
console.log(browser());답변
짧은 변형
var browser = (function() {
var test = function(regexp) {
return regexp.test(window.navigator.userAgent);
}
switch (true) {
case test(/edg/i): return "edge";
case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
case test(/chrome/i) && !!window.chrome: return "chrome";
case test(/trident/i): return "ie";
case test(/firefox/i): return "firefox";
case test(/safari/i): return "safari";
default: return "other";
}
})();
console.log(browser)답변
다음은 Microsoft Edge 및 깜박임 감지를 포함하여 2016 년 Rob의 답변 수정 버전입니다.
( 편집 : 위의 정보로 Rob의 답변을 업데이트했습니다.)
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;
/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);이 접근 방식의 장점은 브라우저 엔진 속성에 의존하므로 Yandex 또는 Vivaldi와 같은 파생 브라우저도 포함하며 엔진을 사용하는 주요 브라우저와 실질적으로 호환됩니다. 단, 사용자 에이전트 스니핑에 의존하는 Opera는 예외입니다. 그러나 오늘날 (즉, 버전 15 이상) Opera 자체도 Blink의 셸일뿐입니다.
