Browser Detection : The Code - JavaScript Tutorial - EchoEcho.Com

Browser Detection :

THE CODE

First create a page with the standard skeleton code for all webpages:

BROWSER DETECTION SCRIPT - Step 1/3

<html>
<head>
<title>Browserdetection</Title>
</head>

<body>
</body>
</html>

The javascript that will detect the browser makes use of the navigator object.

This object holds these interesting variables:

VARIABLES	DESCRIPTION
navigator.appCodeName	The code name of the browser (e.g. Mozilla)
navigator.appName	The name of the browser (e.g. Netscape or Microsoft Internet Explorer)
navigator.appVersion	The browser version (e.g. 3.0 or 4.0)
navigator.userAgent	The header information for the browser. (e.g. Mozilla/4.0)
navigator.platform	The users operating system (e.g. WIN32)

The following information was derived from your browser when you arrived on this page:

In short, all we need to do is have the webpage run our script once it's loaded.

This is done by simply writing the javascript code without function declarations.

The following lines should be added to the <head> section of the document:

BROWSER DETECTION SCRIPT - Step 2/3

The above lines store the name of the browser in the variable called browsername.

If the browser is Microsoft Internet Explorer, "MSIE" is stored in the variable.

If it is a Netscape browser, "NS" is stored in the variable.

If it's none of the above, "N/A" is stored in the variable.

Note - The use of indexOf() in the above script:

In the above script you can see this line:

if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}

The function browsername.indexOf("Microsoft") checks the variable browsername for the first appearance of the word Microsoft.

If Microsoft is not present, the result will be -1.

So if browsername.indexOf("Microsoft") does not equal -1 ( != -1 ) it means that the word Microsoft is present somewhere in the browsername variable - and thus, the current browser is Microsoft Internet Explorer.

Now we need to find the version of the relevant browser.

Since navigator.appVersion does not simply hold a value, like 2, 3 or 4, but rather would hold a text, like "3.0b4Gold (Win95; I)", we need to make a little check of the text before we can save a more convenient value in the variable called browserversion.

browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {browserversion="2"};
if (navigator.appVersion.indexOf("3.")!=-1) {browserversion="3"};
if (navigator.appVersion.indexOf("4.")!=-1) {browserversion="4"};
if (navigator.appVersion.indexOf("5.")!=-1) {browserversion="5"};
if (navigator.appVersion.indexOf("6.")!=-1) {browserversion="6"};

First we assign the value zero to the variable.
If none of the checks results in assigning a value to the variable, it will still hold the zero value after the checks.
A value of zero thus means that the browserversion
was not available.

The next 3 lines look for version numbers 2., 3., 4. and 5.
If navigator.appVersion contains any of the numbers, the value is stored in the variable called "browserversion".

The complete script now looks like this:

BROWSER DETECTION SCRIPT - Step 3/3

<html>
<head>
<title>Browser detection</Title>
<Script Language="JavaScript">
browsername=navigator.appName;
if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
else
{if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
else {browsername="N/A"}};
browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {browserversion="2"};
if (navigator.appVersion.indexOf("3.")!=-1) {browserversion="3"};
if (navigator.appVersion.indexOf("4.")!=-1) {browserversion="4"};
if (navigator.appVersion.indexOf("5.")!=-1) {browserversion="5"};
if (navigator.appVersion.indexOf("6.")!=-1) {browserversion="6"};
</script>
</head>

<body>
</body>
</html>

Now the script holds two variables: browsername and browserversion. This information can be used for whatever purpose we choose.

The browser detection itself does nothing. All it does is - detect the visitors browser. We still haven't added if-statements that tells the browser what it should do in the different cases.

In the example on the next page you will see how you can add if-statements to the browser detection script - in order to send visitors to relevant pages.

<< PREVIOUS