How to Use JavaScript to Detect Browser Version

How to Use JavaScript to Detect Browser Version
Page content

The advantages that JavaScript can bring to website development are considerable. Using this language, you can create user sessions, manipulate cookies, launch pop-up windows, and add various math-based calculations and conditions in different types of loops.

If HTML is basically a static language, one that is more concerned with the look of a website, then JavaScript makes the same site come alive, elevating the basic feel of the site from an online document into something that is living and always changing.

One of the most popular uses for JavaScript – mainly due to the way in which this can be implemented – is to detect the type of browser in use. This requires the navigator object, which is capable of gathering information about visitors to your website. As well as JavaScript browser detection, their operating system and whether they’re using cookies can also be established.

The Navigator Object

The Navigator Object can reveal this information about your readers’ browsersIn order to display this information, you need to be aware of the navigator object, a selection of properties that are populated by the browser used to view the web page. Each of these properties collects a specific piece of information:

  • appCodeName – the code name for the browser
  • appName – the actual, internal name for the browser
  • appVersion – the browser version (should include the operating system it is intended for)
  • cookieEnabled – true or false
  • platform – the operating system and architecture; for instance a 32 bit Windows machine will display Win32
  • userAgent – displays the full user agent details, which also includes more information about the browser, the operating system and the language in use

The navigator object can be used in different ways, as seen, but must be incorporated into a page of HTML using the script tag, such as . To output the results in the browser, the document element must also be called.

Code Sample: Implementing the Navigator Object

There are many different variations on the use of the JavaScript navigator object, some of which will be quite long on first glance.

The following script, however, can be used to give you an idea of how the object can be easily implemented into a web page and used to display useful information to the visitor.

Pasting this selection of text into a plain, static HTML page will display all of the useful browser-based data that the navigator object is designed to detect.

Note that the final line, document.getElementById(“example”).innerHTML=txt;, calls the code to be run; without this, nothing will be displayed.

Using Data Captured With the Navigator Object

There are many different ways in which information gathered by the navigator object can be used, from displaying a visitor’s browser version while they visit a web page to using this same information to load up an alternative version of the site.

For instance, you could use JavaScript to load a specific CSS file for your website based upon which browser was in use. This could prove extremely useful and prevent you from spending too long with tweaking browser-specific hacks in your CSS – all you have to do is tweak each layout for each browser and use a script such as this in the website header:

This type of data can also be collected and used to help you to draw up a profile of your users. This can either tell you something new or confirm what you already suspected. For instance, if you run a blog about Mac OS X, you would probably expect the majority of visitors to be running a version of that operating system, and the navigator object can help you to confirm this. Alternatively, you could learn something new, such as the number of overseas visitors, based on the language returned by the navigator.appVersion property.

Note, however, that you will rarely have to go to the trouble of collecting data for analysis as systems such as Google Analytics records all of this information for you anyway.

References

Author’s own experience.

Screenshot provided by author.