Browser detection is a vital tool when your web site looks different or does not function correctly when viewed in different browsers. Using Javascript, you can redirect viewers to different pages or display different content depending on a user's browser.
We will use the indexOf function and the navigator object in order to preform browser detection. What we first need to do is to determine what type of browser the user is using. To do this, we use the navigator.appName function to determine the type (application) being used. We create a variable called browsername to do this. Here is what the script looks like so far:
<script language="JavaScript"> broswername=navigator.appName;
Ok, now that we have the application, we can use the if function to determine what kind of application (Internet Explorer or Netscape) it is. To do this, use this code:
if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
else
{if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
What this does is check if the word Netscape or Microsoft is in the browser name which determines the value of the variable: browsername. Ok, now, all that script (provided below) goes into the HEAD section of your page. This is very important.
<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"}};
<script>
Now that you know how to detect the browser, we will show you how to capture the version and then send the user to the specified page. We will use the same .indexOf function as before.
To find the browser version, set a new variable, browserversion, equal to 0, then run an indexOf check to find numbers in the navigator.appName. We would like to find all the numbers between 2-6. So, this is what the script is:
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"};
So, when this if function finds a number, it assigns it to browserversion, if no numbers are found, browserversion stays 0.
Well, now you can put it all together. In this script, MSIE users get sent to Spoono, NS users get sent to Netscape.com, and others get sent to AOL.com. Here it goes:
<html>
<head>
<title>Browser Detect Script</title>
<script language="Javascript">
//Find Application
browsername=navigator.appName;
if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
else
{if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
else {browsername="N/A"}};
//Detect Version
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"};
//send to locations
if(browsername="NS")
{window.location=http://www.netscape.com};
if(browsername="MSIE")
{window.location=http://www.spoono.com};
if(browsername="N/A")
{window.location=http://www.aol.com};
</script>
</head>
<body>
</body>
</html>
If you want, you can also send users to different sites depending on the version of the browser by using the if(browserversion) = x function.
