Recherche…
Introduction
Les navigateurs, au fur et à mesure de leur évolution, offrent plus de fonctionnalités à Javascript. Mais souvent, ces fonctionnalités ne sont pas disponibles dans tous les navigateurs. Parfois, ils peuvent être disponibles dans un navigateur, mais doivent encore être publiés sur d'autres navigateurs. D'autres fois, ces fonctionnalités sont implémentées différemment par différents navigateurs. La détection des navigateurs devient importante pour garantir que l'application que vous développez fonctionne correctement sur différents navigateurs et périphériques.
Remarques
Utilisez la détection de fonctionnalités lorsque cela est possible.
Il y a des raisons d'utiliser la détection de navigateur (par exemple, donner des instructions à l'utilisateur pour installer un plug-in de navigateur ou effacer son cache), mais la détection des fonctionnalités est généralement considérée comme la meilleure pratique. Si vous utilisez la détection de navigateur, assurez-vous qu'il est absolument indispensable.
Modernizr est une bibliothèque JavaScript légère et populaire qui facilite la détection des fonctionnalités.
Méthode de détection des fonctionnalités
Cette méthode recherche l'existence d'éléments spécifiques au navigateur. Ce serait plus difficile à falsifier, mais il n'est pas garanti que ce soit à l'épreuve du futur.
// 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;
Testé avec succès dans:
- Firefox 0.8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Edge - 20-25
Crédit à Rob W
Méthode de la bibliothèque
Une approche plus simple pour certains serait d'utiliser une bibliothèque JavaScript existante. En effet, il peut être difficile de garantir que la détection du navigateur est correcte. Il peut donc être judicieux d’utiliser une solution opérationnelle, le cas échéant.
Une bibliothèque de détection de navigateur populaire est Bowser .
Exemple d'utilisation:
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');
}
Détection d'agent d'utilisateur
Cette méthode obtient l'agent utilisateur et l'analyse pour trouver le navigateur. Le nom et la version du navigateur sont extraits de l'agent utilisateur via une expression régulière. Sur la base de ces deux éléments, le <browser name> <version> est renvoyé.
Les quatre blocs conditionnels suivant le code de correspondance de l'agent utilisateur sont censés prendre en compte les différences entre les agents utilisateurs des différents navigateurs. Par exemple, dans le cas de l'opéra, comme il utilise le moteur de rendu Chrome , une étape supplémentaire consiste à ignorer cette partie.
Notez que cette méthode peut être facilement usurpée par un utilisateur.
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(' ');
})();
Crédit à kennebec