Détection du Browser (Navigateur)

Bien que les nouvelles versions de Browser soit de plus en plus compatibles, il subsiste néant moins des différences.
Ces différences sont sensibles au niveau code javascript, interprétation du code lui-même
Mais également lors de l'affichage et notamment lors de l'application des styles CSS.
Pour éviter bien des distorsions ou des erreurs brutales il nous faut donc connaître le browser client.

Code standart de détection du browser

Avec quelques lignes de javascript nous pouvons identifier le browser

Informations sur le Browser Client

document.write("Browser CodeName: " + navigator.appCodeName);

document.write("<br /><br />");

document.write("Browser Name: " + navigator.appName);

document.write("<br /><br />");

document.write("Browser Version: " + navigator.appVersion);

document.write("<br /><br />");

document.write("Cookies Enabled: " + navigator.cookieEnabled);

document.write("<br /><br />");

document.write("Platform: " + navigator.platform);

document.write("<br /><br />");

document.write("User-agent header: " + navigator.userAgent);

 

Ce qui dans le cas présent avec votre navigateur donne:

Cas particulier du navigateur Internet Explorer (IEX)

Très souvent surtout lors de l'application du javascript la différence se situe au niveau du type de browser
Soit il est du type IEX made by Microsoft, soit il est d'un autre type.
Il est très facile de tester le type IEX, il suffit de faire:

If (document.all) //c'est IEX

En effet les autres types de  browser ne possède de propriété document.all

Une classe pour détecter votre navigateur

Afin de simplifier notre recherche du type de browser il est possible de créer une fonction qui sera appelée
de façon systématique lorsque nous voudrons connaître le type exact du navigateur.

 

Classe BrowserDetect()

var BrowserDetect = {

        init: function () {

                this.browser = this.searchString(this.dataBrowser) || "An unknown browser";

                this.version = this.searchVersion(navigator.userAgent)

                        || this.searchVersion(navigator.appVersion)

                        || "an unknown version";

                this.OS = this.searchString(this.dataOS) || "an unknown OS";

        },

        searchString: function (data) {

                for (var i=0;i<data.length;i++) {

                        var dataString = data[i].string;

                        var dataProp = data[i].prop;

                        this.versionSearchString = data[i].versionSearch || data[i].identity;

                        if (dataString) {

                                if (dataString.indexOf(data[i].subString) != -1)

                                        return data[i].identity;

                        }

                        else if (dataProp)

                                return data[i].identity;

                }

        },

        searchVersion: function (dataString) {

                var index = dataString.indexOf(this.versionSearchString);

                if (index == -1) return;

                return parseFloat(dataString.substring(index+this.versionSearchString.length+1));

        },

        dataBrowser: [

                {

                        string: navigator.userAgent,

                        subString: "Chrome",

                        identity: "Chrome"

                },

                {       string: navigator.userAgent,

                        subString: "OmniWeb",

                        versionSearch: "OmniWeb/",

                        identity: "OmniWeb"

                },

                {

                        string: navigator.vendor,

                        subString: "Apple",

                        identity: "Safari",

                        versionSearch: "Version"

                },

                {

                        prop: window.opera,

                        identity: "Opera"

                },

                {

                        string: navigator.vendor,

                        subString: "iCab",

                        identity: "iCab"

                },

                {

                        string: navigator.vendor,

                        subString: "KDE",

                        identity: "Konqueror"

                },

                {

                        string: navigator.userAgent,

                        subString: "Firefox",

                        identity: "Firefox"

                },

                {

                        string: navigator.vendor,

                        subString: "Camino",

                        identity: "Camino"

                },

                {               // for newer Netscapes (6+)

                        string: navigator.userAgent,

                        subString: "Netscape",

                        identity: "Netscape"

                },

                {

                        string: navigator.userAgent,

                        subString: "MSIE",

                        identity: "Explorer",

                        versionSearch: "MSIE"

                },

                {

                        string: navigator.userAgent,

                        subString: "Gecko",

                        identity: "Mozilla",

                        versionSearch: "rv"

                },

                {               // for older Netscapes (4-)

                        string: navigator.userAgent,

                        subString: "Mozilla",

                        identity: "Netscape",

                        versionSearch: "Mozilla"

                }

        ],

        

        dataOS : [

                {

                        string: navigator.platform,

                        subString: "Win",

                        identity: "Windows"

                },

                {

                        string: navigator.platform,

                        subString: "Mac",

                        identity: "Mac"

                },

                {

                           string: navigator.userAgent,

                           subString: "iPhone",

                           identity: "iPhone/iPod"

            },

                {

                        string: navigator.platform,

                        subString: "Linux",

                        identity: "Linux"

                }

        ]

 

};

Ici toutes les fonctions sont déjà prêt écrites

Pour les utilisées, il faut d'abord initialiser la classe

BrowserDetect.init();

Puis on recherche les informations voulues:

BrowserDetect.browser;

BrowserDetect.version;

BrowserDetect.OS;

Nous pouvons par exemple écrire:

document.write(BrowserDetect.browser + " - " + BrowserDetect.version + " - " + BrowserDetect.OS)

Nous obtenons alors pour votre ordinateur: