Browser Detection

So... you've been wanting to learn JavaScript, but just haven't been able to find a useful site. Well, through this as well as following articles, you will be able to learn and use JavaScript. The idea of this article is to help those with little, or no experience with JavaScript to familiarize themselves with the language. If you already know JavaScript you may still find some of these tips useful.

One trick that is very useful to use is browser detection. Many sites I have seen have their opening page simply a browser version selection page. This unfortunately, is in my opinion, one of the worst techniques that can be used on any web site. Although this does produce the desired result, it is one of the least aesthetic techniques that was ever devised. JavaScript can be used to redirect the user to the correct version of the page, or to insert tags specifically for users of a certain browser.

Let's get right to the code! The following script will store the Browser type and version in variables for later use.

if(browserName == "Netscape" && browserVersion >= 3)

version = "navigator3";

else if(browserName == "Netscape" && browserVersion == 2)

version = "navigator2";

else if(browserName == "Microsoft Internet Explorer" && browserVersion >= 4)

version = "internetExplorer4";

else if(browserName == "Microsoft Internet Explorer" && browserVersion >= 2)

version = "internetExplorer3";

// End hiding this script -->
</script>

After this script is inserted in an HTML document a variety of techniques can make use of the information you just collected. The following script is an example of the code necessary if you wish to have totally separate pages for different browsers.

if(version == "navigator3")
{

document.write(‘<frameset rows = "100%,*" frameborder="0" border="0" +
‘<frame name="main" src="index_navigator3.html"’ +
‘ scrolling="auto" marginheight="2" marginwidth="2">’ +
‘</frameset>’);

}
else if(version == "internetExplorer3")
{

document.write(‘<frameset rows = "100%,*" frameborder="0" border="0" +
‘<frame name="main" src="index_internetexplorer3.html"’ +
‘ scrolling="auto" marginheight="2" marginwidth="2">’ +
‘</frameset>’);

}

In this example, anyone using the Netscape browser will see the Netscape specific page, similarly, anyone using the Internet Explorer browser will see the Internet Explorer specific page, and anyone else will see the page that follows in the body. One great advantage of using this script is that the user will never see a page flash by as they are redirected, but the actual page they will view will be loaded into the frame created in the first page.

Another technique that enables you to avoid having multiple sets of pages follows.

The script above allows you to write in browser specific tags. In this way only those who are using the specific browser will see the particular text, or tags that you specify. One final suggestion for the use of this code is detect browser manufacturer and version to determine if the browser will choke on unsupported code. For example, Internet Explorer does not currently support anywhere near the amount of functions and capabilities that Navigator supports, therefore if you are going to use something only supported by Navigator do something similar to the following:

In this way, those who can view the code will see it, while those who are using browsers that would spit out about 20 errors over the code won't even look at it.