Zoeken…
Invoering
Browsers, zoals ze zijn geëvolueerd, boden meer functies aan Javascript. Maar vaak zijn deze functies niet in alle browsers beschikbaar. Soms zijn ze beschikbaar in één browser, maar moeten ze nog worden vrijgegeven in andere browsers. Andere keren worden deze functies anders geïmplementeerd door verschillende browsers. Browserdetectie wordt belangrijk om ervoor te zorgen dat de applicatie die u ontwikkelt soepel verloopt tussen verschillende browsers en apparaten.
Opmerkingen
Gebruik waar mogelijk detectie.
Er zijn enkele redenen om browserdetectie te gebruiken (bijvoorbeeld een gebruiker aanwijzingen geven over het installeren van een browserplug-in of het wissen van het cachegeheugen), maar over het algemeen wordt functiedetectie als beste praktijk beschouwd. Als u browserdetectie gebruikt, moet u ervoor zorgen dat dit absoluut noodzakelijk is.
Modernizr is een populaire, lichtgewicht JavaScript-bibliotheek die functieherkenning eenvoudig maakt.
Functiedetectiemethode
Deze methode zoekt naar het bestaan van browserspecifieke dingen. Dit zou moeilijker te vervalsen zijn, maar is niet gegarandeerd toekomstbestendig.
// 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;
Succesvol getest in:
- Firefox 0.8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Rand - 20-25
Met dank aan Rob W
Bibliotheek methode
Een gemakkelijkere aanpak voor sommigen zou zijn om een bestaande JavaScript-bibliotheek te gebruiken. Dit is omdat het lastig kan zijn om te garanderen dat browserdetectie correct is, dus het kan zinvol zijn om een werkende oplossing te gebruiken als die beschikbaar is.
Een populaire bibliotheek voor browserdetectie is Bowser .
Gebruiksvoorbeeld:
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');
}
Detectie van gebruikersagent
Deze methode haalt de user-agent op en parseert deze om de browser te vinden. De browsernaam en -versie worden via een regex uit de user-agent gehaald. Op basis van deze twee wordt de <browser name> <version> geretourneerd.
De vier voorwaardelijke blokken die volgen op de user agent matching code zijn bedoeld om rekening te houden met verschillen in de user agents van verschillende browsers. In het geval van opera, omdat het de Chrome-rendering-engine gebruikt , is er een extra stap om dat deel te negeren.
Merk op dat deze methode gemakkelijk kan worden vervalst door een gebruiker.
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(' ');
})();
Met dank aan kennebec