Developer Snippets - An Embodiment for Developers

Do you want to know and detect visitor�s browser version using JavaScript, yeah here is the script that let you know everything about your Visitor�s browser version, browsers application name, the code name of the browser, and even you can check whether the browser has cookies enabled or not.

The JavaScript Navigator object does the same; it contains the information about your visitor�s browser. When you are working on any project related to web browsers, in some scenarios you would like to know the visitors browser version, by this you would like to make sure that the code or your application should not popup any errors or especially this will helps in your presentation of the page, like for example: height and width of the page. If you see the height and width may differ based on the browser which user is viewing your application.

Navigator Object (navigator object) of JavaScript contains many core properties like appCodeName , appName , appVersion , cookieEnabled , language , mimeTypes[] , platform[] , plugins , systemLanguage , userAgent , userLangauge .

The core properties of ‘navigator ‘ object and there description is depicted below:

1. appCodeName: (navigator.appCodeName) holds Code Name of the browser.
2. appName: (navigator.appName) holds the name of the browser.
3. appVersion: (navigator.appVersion) holds the version of the browser.
4. cookieEnabled: (navigator.cookieEnabled) returns Boolean that indicates whether the browser has cookie enabled or not.
5. language: (navigator.language) returns the default language of the browser which user is using.
6. mimeTypes[]: (navigator.mimeTypes) It returns the array of all MIME types supported by the user.
7. platform[]: (navigator.platform) The platform of the user�s computer. For Example: Win32
8. plugins: (navigator.plugins) It returns array of all plug-ins currently installed on user�s browser.
9. systemLanguage: (navigator.systemLanguage) Which returns the default language of the user�s operating system. Works for only IE (Internet Explorer).
10. userAgent: (navigator.userAgent) returns the value of the user-agent header sent by the client to the server.

If you want to see, how to we can use navigator object to detect the browser type of your visitors. Then you guys! Need to look at the program which is depicted below, the below program utilizes all the respective properties of navigator object.

Below is the simple function, which shows different properties which comes under navigator object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function browserDetection()
{
        var str;
        str='navigator.appCodeName: '+navigator.appCodeName;
        str+='navigator.appName: '+navigator.appName;
        str+='navigator.appVersion: '+navigator.appVersion;
        str+='navigator.cookieEnabled: '+navigator.cookieEnabled;
        str+='navigator.language: '+navigator.language;
        str+='navigator.mimeTypes: '+navigator.mimeTypes;
        str+='navigator.platform: '+navigator.platform;
        str+='navigator.plugins: '+navigator.plugins;
        str+='navigator.systemLanguage: '+navigator.systemLanguage;
        str+='navigator.userAgent: '+navigator.userAgent;
 
        document.getElementById('description').innerHTML=str;
}

And below is the HTML code, which needs to be placed in the body of the HTML page:

1
2

<div>
<input id="browserDetection" onclick="browserDetection()" name="browserDetection" type="button" value="Browser Detection" /></div>

As of now I have tested in only three browsers that is Mozilla Firefox ,
Internet Explorer and Google Chrome :

Output in Firefox:
navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows; en-US)
navigator.cookieEnabled: true
navigator.language: en-US
navigator.mimeTypes: [object MimeTypeArray]
navigator.platform: Win32
navigator.plugins: [object PluginArray]
navigator.systemLanguage: undefined
navigator.userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Output in InternetExplorer:
navigator.appCodeName: Mozilla
navigator.appName: Microsoft Internet Explorer
navigator.appVersion: 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
navigator.cookieEnabled: true
navigator.language: undefined
navigator.mimeTypes:
navigator.platform: Win32
navigator.plugins:
navigator.systemLanguage: en-us
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

Output in Google Chrome:
navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.30 Safari/525.13
navigator.cookieEnabled: true
navigator.language: en-US
navigator.mimeTypes: [object MimeTypeArray]
navigator.platform: Win32
navigator.plugins: [object PluginArray]
navigator.systemLanguage: undefined
navigator.userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.30 Safari/525.13

If you look at the above output’s you can observe that some of the properties is returning “undefined” since some properties will work only in some browsers.