Javascript - Object detection

See section 3C of the book.

This page has been translated into French, Turkish, Norwegian, and Romanian.

Fairly soon you will notice that certain features of JavaScript do not work in certain browsers. If you want to use an advanced bit of script, you first have to check whether a browser supports the objects you want to use. This page explains how to do it.

Browser detection - No

If you want to know whether the browser that views your page supports certain objects you want to use in your code, you should never EVER use a browser detect. Sure, you know that this–and–that browser will support your code while such–and–so browser won’t. But how about other browsers, obscure browsers?

While browser detection works well enough for 90% of your visitors, some obscure browsers won't be treated correctly and browsers that appear after you've written the page may not be adequately covered either. The results would be either a stream of error messages or a script that isn't called while the browser can easily handle it. In both cases, you're cheating your end users and coding incorrectly.

Case study: mouseovers

An old case study will clarify things. Nowadays this particular example isn't much of an issue any more, but the principles are still valid.

It is a well known fact that IE 3 does not support the document.images array that is vital for a mouseover script. Thus we have to prevent the script from being executed in IE 3. A solution would be to do a browser detect for IE 3 and not exceute the functions if the user views your page with IE 3.

However, on most OS's Netscape 2 doesn't support document.images either. If you just do a browser detect for IE 3, you leave the Netscape 2 users helpless to a stream of errors.

So why not add Netscape 2 to your browser detect? Because it doesn't solve anything.

Netscape 2 on OS/2 is almost completely Netscape 3 compatible and it can handle mouseover effects. Nonetheless the effects usually aren't visible because the web developers used a browser detect and decided that Netscape 2 couldn't possibly support mouseovers. Thus they cheated their end users of a bit of interaction without good reason. A proper object detect would have avoided these problems.

Finally, more and more browsers give the user the possibility to adjust his browser identification string to anything he likes (see the browser detect page). Therefore it's quite possible that a browser detect doesn't recognize his browser and therefore excludes it from functionality that it can handle without trouble. Here, once again, you cheat your users of an extra bit of interaction. Even worse, it's bad coding.

JavaScript versions - No

When devising JavaScript, Netscape was fully aware that future browsers would support more objects than old ones, and that web developers should be able to distinguish between old and new browsers.

The original plan was that they would check the JavaScript version number. Such-and-such object was only to be supported by JavaScript 1.something. Use the JavaScript version number in your <script> tag and browser that don’t support the object won’t execute the script.

However, when Microsoft entered the market, this idea went to shambles. Although early Netscape 4 and IE 4 versions both supported JavaScript 1.2, not even the most powerful fantasy can imagine them supporting the same JavaScript 1.2 . With this the version numbers became obsolete and irrelevant to object detection.

Object detection - Yes

Instead, we simply look if the browser supports the object (method, array or property) we want to use. Let’s continue with the mouseover example. This script relies on the document.images array, so first and foremost we'll have to detect if the browser supports it. This is done by

Now you have a fail safe method of seeing if any browser can handle mouseovers. The if-statements checks if the array document.images exists. If it does (document.images) is true and the script is executed. If the images array doesn't exist it becomes false and the script is not executed.

Another common detect is for window.focus. This is a method (a command by which you tell JavaScript to do something for you). If we want to use the method, we'll have to check first if the browser supports it.

Note the correct way of doing this: you ask for the method without brackets. This code

means: "If you can put the focus on the window" and assumes that focus is supported. If it isn't, this line of code creates errors. The brackets () actually execute the focus command, which is not what we want in this case. So we check it without the brackets (see if it exists) and only when the browser passes the check we actually execute the command by adding brackets:

The point

So the whole point is that if you want to use the array document.images, first check if it is supported. If you want to use the focus method of the window, first check if it is supported.

If you always use object detection, your scripts will never generate any error messages, although they might not work in certain browsers.