Ricerca…
introduzione
I browser, come si sono evoluti, hanno offerto più funzionalità a Javascript. Ma spesso queste funzionalità non sono disponibili in tutti i browser. A volte possono essere disponibili in un browser, ma ancora essere rilasciati su altri browser. Altre volte, queste funzionalità sono implementate in modo diverso dai diversi browser. Il rilevamento del browser diventa importante per garantire che l'applicazione sviluppata si svolga senza intoppi tra diversi browser e dispositivi.
Osservazioni
Usa il rilevamento delle funzioni quando possibile.
Esistono alcuni motivi per utilizzare il rilevamento del browser (ad esempio, fornire le istruzioni per l'utente su come installare un plug-in del browser o svuotare la cache), ma in genere il rilevamento delle funzionalità è considerato la best practice. Se stai usando il rilevamento del browser, assicurati che sia assolutamente nosarizzato.
Modernizr è una libreria JavaScript leggera e popolare che semplifica il rilevamento delle funzioni.
Metodo di rilevamento delle feature
Questo metodo cerca l'esistenza di cose specifiche del browser. Ciò sarebbe più difficile da falsificare, ma non è garantito che sia una prova futura.
// 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;
Testato con successo in:
- Firefox 0.8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Bordo - 20-25
Ringraziamento a Rob W
Metodo di libreria
Un approccio più semplice per alcuni sarebbe quello di utilizzare una libreria JavaScript esistente. Questo perché può essere complicato garantire che il rilevamento del browser sia corretto, quindi può essere logico utilizzare una soluzione funzionante, se disponibile.
Una popolare libreria di rilevamento dei browser è Bowser .
Esempio di utilizzo:
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');
}
Rilevazione agente utente
Questo metodo ottiene l'interprete e lo analizza per trovare il browser. Il nome e la versione del browser vengono estratti dall'agente utente tramite un'espressione regolare. In base a questi due, viene restituito il <browser name> <version> .
I quattro blocchi condizionali che seguono il codice di corrispondenza con l'agente utente sono pensati per tenere conto delle differenze nei programmi utente di diversi browser. Ad esempio, in caso di opera, poiché utilizza il motore di rendering di Chrome , c'è un ulteriore passaggio di ignorare quella parte.
Si noti che questo metodo può essere facilmente falsificato da un utente.
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(' ');
})();
Credito a Kennebec