Browser Detection

      The very basic step of solving the Cross Browser problem in JavaScript can be done by detecting the browser. Navigator Object is the one which will give all the information about the browser we are using. Let us look at how we can find the browser is Internet Explorer, Mozilla Firefox etc through Navigator object.

The navigator object of JavaScript contains the following core properties:

Properties	Description
appCodeName	The code name of the browser.
appName	The name of the browser
appVersion	Version information for the browser.
cookieEnabled	Boolean that indicates whether the browser has cookies enabled
language	Returns the default language of the browser version
mimeTypes	An array of all MIME types supported by the client
Platform	The platform of the client's computer
Plugins	An array of all plug-ins currently installed on the client
systemLanguage	Returns the default language of the operating system
userAgent	String passed by browser as user-agent header
vendor	String passed by browser as user-agent header
userLanguage	Returns the preferred language setting of the user

Sample Example of differentiating the IE and other browsers :-

if (navigator.appName==='Netscape'){    //Firefox ,Chrome,etc

}

if(navigator.appName==='Microsoft Internet Explorer'){
    //Internet Explorer
}

         Navigator objects appName property can be just used to differentiate the IE from Other browser like firefox,chrome,safari etc. Now we can probably think to differentiate between Firefox, chrome, Safari, Opera etc because appName will be same (i.e Netscape).

So the trick of detecting the browser detection can be important and let’s try to solve it . Traditionally we use navigator.userAgent More recently, new browsers have started to support the navigator.vendor property, which contains information about the vendor. It’s more preferable to use the navigator.vendor property because navigator.userAgent value always is more towards ambiguity.

Sample examples for different browsers can be as follows-

• ·Firefox 
• navigator.userAgent  is preferable property
•  Chrome
• Navigator,vendor = Google Inc.
• Navigator.userAgent = Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.100
• Apple Safari
• Navigator,vendor = Apple Computer, Inc.
• User-agent header  = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

So we can use this Property to find the different types of browser.

Navigator Object

Below we can see the object of navigator. These variables can be read out and give information about the browser and computer of your users. Use this information to add new objects to the browser detect.

navigator.userAgent = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.17) Gecko/20110420 Firefox/3.6.17 navigator.vendor = navigator.platform = Win32 navigator.appCodeName = Mozilla navigator.appName = Netscape navigator.appVersion = 5.0 (Windows; en-US) navigator.language = en-US navigator.mimeTypes = [object MimeTypeArray] navigator.oscpu = Windows NT 5.1 navigator.vendorSub = navigator.product = Gecko navigator.productSub = 20110420 navigator.plugins = [object PluginArray] navigator.securityPolicy = navigator.cookieEnabled = true navigator.onLine = true navigator.buildID = 20110420140830