Cara Mendeteksi Browser dan OS yang Digunakan dengan Javascript

Untuk mendeteksi browser apa dan OS apa yang dipakai user ketika mengakses suatu website kita bisa menggunakan javascript code. Javascript code ini akan mendeteksi suatu user menggunakan browser apa, versi berapa, dan menggunakan OS apa. Langsung saja contoh implementasinya adalah sebagai berikut :


var Browser = {
   init: function () {
     // Get the browser info
     this.browser = this.searchString(this.dataBrowser) || "unknownBrowser";
     this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "unknownVersion";
     this.OS = this.searchString(this.dataOS) || "unknownOS";
   },
    
   // search through the dataBrowser and dataOS object to find a match
   // for the browser name and OS respectively
   searchString: function (data) {
     var dataString, dataProp, i=0, len = data.length;
     for (i; i<len; i+=1) {
       dataString = data[i].string;
       dataProp = data[i].prop;
       this.versionSearchString = data[i].versionSearch || data[i].agent;
       if (dataString) {
         if (dataString.indexOf(data[i].subString) !== -1) {
             return data[i].identity;
           }
       }
       else if (dataProp) {
         return data[i].identity;
       }
     }
   },
    
   // search through the userAgent to find a match
   // for the browser version
   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",
       agent: "Chrome", // browser name, change wherever you see identity above to agent if you rather have this
       identity: "chrome" // this is used incase you want to add classes to your html markup
     },
     {
       string: navigator.userAgent,
       subString: "OmniWeb",
       versionSearch: "OmniWeb/",
       agent: "OmniWeb",
       identity: "omniweb"
     },
     {
       string: navigator.vendor,
       subString: "Apple",
       agent: "Safari",
       identity: "safari",
       versionSearch: "Version"
     },
     {
       prop: window.opera,
       agent: "Opera",
       identity: "opera"
     },
     {
       string: navigator.vendor,
       subString: "iCab",
       agent: "iCab",
       identity: "icab"
     },
     {
       string: navigator.vendor,
       subString: "KDE",
       agent: "Konqueror",
       identity: "konqueror"
     },
     {
       string: navigator.userAgent,
       subString: "Firefox",
       agent: "Firefox",
       identity: "Mozilla Firefox"
     },
     {
       string: navigator.vendor,
       subString: "Camino",
       agent: "Camino",
       identity: "camino"
     },
     {
       // for newer Netscapes (6+)
       string: navigator.userAgent,
       subString: "Netscape",
       agent: "Netscape",
       identity: "netscape"
     },
     {
       string: navigator.userAgent,
       subString: "MSIE",
       agent: "Explorer",
       identity: "ie",
       versionSearch: "MSIE"
     },
     {
       string: navigator.userAgent,
       subString: "Gecko",
       agent: "Mozilla",
       identity: "mozilla",
       versionSearch: "rv"
  },
     {
       // for older Netscapes (4-)
       string: navigator.userAgent,
       subString: "Mozilla",
       agent: "Netscape",
       identity: "netscape",
       versionSearch: "Mozilla"
     }
   ],
   dataOS : [
     {
       string: navigator.platform,
       subString: "Win",
       agent: "Windows",
       identity: "windows"
     },
     {
       string: navigator.platform,
       subString: "Mac",
       agent: "Mac",
       identity: "mac"
     },
     {
        string: navigator.userAgent,
     subString: "iPhone",
        agent: "iPhone/iPod",
        identity: "iphone-ipod"
     },
     {
       string: navigator.platform,
       subString: "Linux",
       agent: "Linux",
       identity: "linux"
     }
   ]
 };
  
 // Example usage
 Browser.init();
 document.write('<h1>You\'re using ' + Browser.browser + ' ' + Browser.version + ' on ' + Browser.OS + '!</h1>');

Created by Peter-Paul Koch
@link http://www.quirksmode.org/js/detect.html

Selamat mencoba dan semoga bermanfaat...

3 comments:

Ujang Rohidin mengatakan...

salam kenal mas bow..........??

Anonim mengatakan...

nice blog.. bisa tampil cepat bahkan dgn koneksi lelet..

Unknown mengatakan...

@Mas Ujang
Salam kenal juga mas Ujang...

Posting Komentar