Don't Use Browser Detect Scripts

One of the main issues that arise when writing javascript is ensuring that your script will work in all browsers, or at least fail gracefully if the browser can't support it. As a response to this need you'll find a plethora of browser detect scripts on the net that attempt, with varying degrees of success, to identify the browser being used.

The idea behind these scripts is that you can then write scripts along the lines of...

if (browser == 'explorer') { // do something } else if (browser == 'mozilla') { // do it slightly differently } else etc...

Browser Detection is WRONG

The problem with this method is that it's unreliable. For it to work the programmer must know exactly which browsers support which functions and the browser detect script must be able to correctly identify the browser in question. This is made more difficult by the fact that a number of browsers falsely report their identity in an attempt to run poorly written scripts that implement browser detects.

Use Object Detection

The right way to do things is to use object detection. What this means is that, instead of doing a blanket test to see what browser is being used and then running different sections of code accordingly, you check that the javascript engine being run supports precisely the object required to run the code.

An example of this would be getting a reference to an object with a certain id. The modern method is to use the document.getElementById method, but this is unsupported by older browsers. There are 2 older methods, document.all and document.layers are arrays used in some older browsers to reference elements by id, but these are not supported by a number of modern browsers.

The browser detect method of handling might look as follows..

if (browser == 'IE 5' || browser == 'IE 6' || browser == 'Firefox' || etc..) { obj = document.getElementById("elemId"); } else if (browser == 'NS4') { obj = document.layers["elemId"]; } else { obj = document.all["elemId"]; }
This can obviously result in some unneccessarily long scripts and is prone to error. What if you forget to include a browser? What if a new browser is released?

A much more simple and robust solution is to use object detection.

if (document.getElementById) { obj = document.getElementById("elemId"); } else if (document.all) { obj = document.all["elemId"]; } else { obj = document.layers["elemId"]; }

In this case the if statement is based on whether the browser recognises the document.getElementById object. If the browser supports it the getElementById will be used, otherwise it will try the document.all method. If it doesn't find that it will attempt to use the the document.layers method. This solution has the added advantage that it doesn't require ongoing maintaince. If a new browser is released this script will continue to work.

A Side Note on getElementById

document.all and document.layers are pretty archaic and in most cases you won't need them. However if you want to support older browsers and don't want to spoil your pretty code by putting if statements everywhere to handle this issue there is a very elegant solution.

You can do an object detect right at the start of your code for the document.getElementById method and if it doesn't exist you can add it yourself. Here's the code that will do it.

if (!document.getElementById) { if (document.all) { document.getElementById = function (id) { return document.all[id]; } } else { document.getElementById = function (id) { return document.layers[id]; } } }

Then you can happily use document.getElementById throughout your code.

Comments

If you've got any questions or feedback about this article please post them in the Dynamic Tools Javascript Forum.