JavaScript Browser Detection
The Navigator object contains information about the visitor's browser.
Browser Detection
Almost everything in this tutorial works on all JavaScript-enabled browsers.
However, there are some things that just don't work on certain browsers - especially on older browsers.
So, sometimes it can be very useful to detect the visitor's browser, and then serve up the appropriate information.
The best way to do this is to make your web pages smart enough to look one way to some browsers and another way to other browsers.
The Navigator object can be used for this purpose.
The Navigator object contains information about the visitor's browser name, version, and more.
 Note: There is no public standard that applies to the navigator object, but all major browsers support it.
The Navigator Object
The Navigator object contains all information about the visitor's browser. We are going to look at two properties of the Navigator object:
- appName - holds the name of the browser
- appVersion - holds, among other things, the version of the browser
Example
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
document.write("Browser name: "+ browser);
document.write("<br />");
document.write("Browser version: "+ version);
</script>
</body>
</html> |
Try it yourself »
|
The variable "browser" in the example above holds the name of the browser, i.e. "Netscape" or "Microsoft Internet Explorer".
The appVersion property in the example above returns a string that contains much more information than just the version number, but for now we are only interested in the version
number. To pull the version number out of the string we are using a function called parseFloat(), which pulls the first thing that looks like a decimal number out of a string and returns it.
IMPORTANT! The version number is WRONG in IE 5.0 or later! Microsoft starts the appVersion string with the number 4.0. in IE 5.0 and IE 6.0!!! Why did they do that??? However, JavaScript is the same in IE6, IE5 and IE4, so
for most scripts it is ok.
The example below displays a different alert, depending on the visitor's browser:
Example
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
{
alert("Your browser is good enough!");
}
else
{
alert("It's time to upgrade your browser!");
}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html> |
Try it yourself »
|
 |
More Examples |
More details about the visitor's browser
All details about the visitor's browser
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data.
Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.
Download a free, fully functional 30-day trial to experience the following features:
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
Download a fully-functional trial today!
|
|
|
| 
