Cross-browser Functionality with Branching - Identify the Browsers Your Visitors Use
(Page 2 of 3 )
Essential to the task of addressing cross-browser compatibility first and foremost is identifying the name of the browser any visitors to your site are using. This should be easy enough in itself using the navigator.appName object, present in most of the major browsers implementations of the DOM. Unfortunately, the current versions of most browsers report themselves to be something they’re not. Type the following page of code:
<html>
<head>
<title>Browser Testing</title>
<script language="javascript">
var browserName=(navigator.appName);
var message="You are using ";
document.write(message + browserName);
</script>
</head>
<body>
</body>
</html>
Now save it as an HTML file and open it in Explorer. If you’re using version 4 or above, it will report itself as Internet Explorer. Now open the same file in Netscape and it should successfully report itself as Netscape. Other browsers act differently; Firefox and Mozilla report themselves to be Netscape and the Avant and Opera browsers report to be Internet Explorer. This obviously makes it difficult at best to actually know reliably which version of which browser is being used. Start asking for the version number as well, and Netscape begins to think its Explorer. Fortunately, additional objects like the userAgent object do refer to the actual name of the browser and in most cases, the version number; change the above code to read:
<html>
<head>
<title>Cross Browsr Functionality</title>
<script language="javascript">
var userAgen=(navigator.userAgent);
var message="You are using ";
document.write(usersBrowser);
document.write(userAgen);
</script>
</head>
<body>
</body>
</html>
Open the page in Firefox and you should see the word Firefox near the end of the code it writes, which means the information we need is available somewhere. This is true of most other browsers except the Avant browser which does not seem to indicate anywhere the name Avant or the version number.
There are several methods of browser detection available to you as a developer; you can detect the browser fairly reliably using the userAgent object or you can detect certainly between Explorer and Netscape using the document.layers object. For the latter method of detection, you will need to create a file as described below:
<html>
<head>
<title>Cross Browsr Detection</title>
<script language="javascript">
if (document.layers) {
document.write("This browsers uses layers")
}
else {
document.write("This browser does not use layers")
}
</script>
</head>
<body>
</body>
</html>
Save the file as hasLayers.htm and open it in Explorer. You should see the text that says the browser does not use layers. Now open the file in Netscape Navigator 4 and you will see the message that says it is using layers. This is due to how the DOM in Netscape 4 accesses the objects in the document hierarchy, instead of using document.all.object.property.selector=value as IE does, it uses document.layer[“object”].selector=value
This is not the case for Netscape 6 or 7 however, as opening the above file in either version will instead give you the message that layers are not in use. The script is still useful, however, as the best method of browser detection is to use both of the methods described above. The first method, using the userAgent property, does result in a larger chunk of code. Create the following file in a text editor:
<html>
<head>
<title>Browser Detection</title>
<script language="javascript">
browserName=(navigator.appName);
userAgen=(navigator.userAgent);
locMSIE=userAgen.indexOf("MSIE");
locNS=userAgen.indexOf("Netscape");
locOpera=userAgen.indexOf("Opera");
locFirefox=userAgen.indexOf("Firefox");
locMozilla=userAgen.indexOf("rv");
msVersion=parseFloat(userAgen.substring(locMSIE+5));
nsVersion=parseFloat(userAgen.substring(locNS+9));
opVersion=parseFloat(userAgen.substring(locOpera+6));
moVersion=parseFloat(userAgen.substring(locMozilla+3));
fiVersion=parseFloat(userAgen.substring(locFirefox+8));
if (locNS != -1) {
document.write("You are using Netscape" + "<br>" + "Version " + nsVersion);
}
else if(locOpera != -1) {
document.write("You are using Opera" + "<br>" + "Version " + opVersion);
}
else if (locFirefox != -1) {
document.write("You are using Firefox" + "<br>" + "Version " + fiVersion);
}
else if (locMozilla != -1) {
document.write("You are using Mozilla" + "<br>" + "Version " + moVersion);
}
else {
document.write("You are using " + browserName + "<br>" + "Version " + msVersion);
}
</script>
</head>
<body>
</body>
</html>
Save this as browserDetecting.htm. The script first sets some variables to capture the appName and the userAgent objects, and then sets some more variables to capture which browser name and which version number appear in the userAgent object. The variables that begin with ‘loc’ first locate the string that appears in brackets after it. The ‘Version’ variables then read a specified number of characters after the first letter in the ‘loc’ string and returns the floating integer. The if statements that follow simply display the browser name and version variables with some explanatory text.
For example, if you open the above file in Internet Explorer 6, the script first sets locMSIE to true and the remaining loc variables to false, then stores the decimal number which appears five characters from the start of the string MSIE. The if statement then advises that you are using Microsoft Internet Explorer and displays the version number.
This script will only work for the most recent versions of the listed browsers, opening the file with Netscape Navigator 4 will not give you the version number because, in the userAgent object, the version number appears 10 characters after the first letter of the string Netscape, and not 9 characters as it does in later versions.
Nevertheless, using a combination of both of the above methods of detection, this can be achieved successfully, which is what we’ll be doing next.
Next: Test Browser and Re-direct Visitor >>
More DHTML Articles
More By Dan Wellman
