Sök…
Introduktion
Som de har utvecklats erbjuder webbläsare fler funktioner till Javascript. Men ofta är dessa funktioner inte tillgängliga i alla webbläsare. Ibland kan de vara tillgängliga i en webbläsare men ändå släppas i andra webbläsare. Andra gånger implementeras dessa funktioner på olika sätt av olika webbläsare. Webbläsarupptäckt blir viktigt för att säkerställa att applikationen du utvecklar går smidigt över olika webbläsare och enheter.
Anmärkningar
Använd funktionsdetektering när det är möjligt.
Det finns några skäl att använda webbläsardetektering (t.ex. ge en användaranvisning om hur man installerar en webbläsarplugin eller rensar deras cache), men i allmänhet anses funktionsdetektering vara bästa praxis. Om du använder webbläsardetektering, se till att det är absolut nödvändigt.
Modernizr är ett populärt, lätt JavaScript-bibliotek som gör detektering av funktioner enkelt.
Funktionsdetekteringsmetod
Denna metod letar efter förekomsten av webbläsarspecifika saker. Detta skulle vara svårare att förfalska, men garanteras inte att det är framtida bevis.
// 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;
Testad i:
- Firefox 0,8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Kanten - 20-25
Kredit till Rob W
Biblioteksmetod
En enklare metod för vissa skulle vara att använda ett befintligt JavaScript-bibliotek. Detta beror på att det kan vara svårt att garantera att webbläsarens upptäckt är korrekt, så det kan vara vettigt att använda en fungerande lösning om en är tillgänglig.
Ett populärt bibliotek för detektering av webbläsare är Bowser .
Exempel på användning:
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');
}
Användaragentupptäckt
Den här metoden får användaragenten och analyserar den för att hitta webbläsaren. Webbläsarens namn och version extraheras från användaragenten genom en regex. Baserat på dessa två returneras <browser name> <version> .
De fyra villkorade blocken som följer användaragentens matchningskod är avsedda att redogöra för skillnader i användaragenterna för olika webbläsare. I fallet med opera, till exempel, eftersom det använder Chrome-rendering-motor , finns det ytterligare ett steg att ignorera den delen.
Observera att den här metoden lätt kan förfalskas av en användare.
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(' ');
})();
Kredit till kennebec