Realizato da

Pubblicato il

javascript

script


Ciao a tutti e benvenuti in questa guida su come ottenere il tipo di browser utilizzato da un client usando JavaScript.

In questa guida vedremo in particolare:
Come sapere quale browser sta utilizzando un client: Per esempio possiamo scoprire se un visitatore di un sito sta facendo uso di Google Chrome, Safari, Internet Explorer, Opera, etc…

Saper riconoscere il tipo di Browser utilizzato da un client è molto importante per un front-end developer. Infatti molto spesso, abbiamo bisogno di eseguire un codice JavaScript in base al browser utilizzato dal client. Questa skill torna molto utile quando si vuole capire tramite JavaScript se un client sta usando Internet Explorer (IE).

Cominciamo con la guida:

Come identificare il tipo di browser di un client

Vediamo un semplice script che ci permette di sapere quale browser sta usando il visitatore del nostro sito.

Per identificare il browser del nostro client dobbiamo eseguire questo script:

// 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 = /*@[email protected]*/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;

CiaoPotete inserire ed eseguire questo script appena la pagina è caricata. Per esempio se state usando JQuery, potete eseguire questo script nella funzione document.ready()

Questo semplice codice JavaScript funzione nel seguente modo:

  1. Creiamo una serie di flag che verranno utilizzate per riconoscere il tipo di browser usato dal nostro visitatore
  2. Possiamo controllare tramite un semplice if .. else … per controllare se il browser usato dal nostro client sia di un certo tipo.

Vediamo un esempio:

Come scoprire se un client sta usando Internet Explorer sul mio sito

Vediamo come controllare se un utente sta facendo uso di IE sul nostro sito:

Dopo aver eseguito lo script principale (mostrato in alto), possiamo eseguire il seguente codice JavaScript per 1- controllare se il client usa internet explorer e 2- eseguire un codice a seconda del browser usato.

// 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 = /*@[email protected]*/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;
if(isIE){
console.log(“il nostro user ha Internet Explorer”);
} else{
console.log(“il nostro user sta usando un’altro browser”);
}

Potete copiare ed incollare questo codice nel vostro sito e cambiare il flag all’interno del IF a seconda del browser che volete rilevare.

Ci siamo! Ora sapete come riconoscere ed identificare il tipo di browser utilizzato da un visitatore usando JavaScript.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)