Support Detection
Before you execute many of your JavaScript functions you're going to need to check whether a particular object or method is supported by your reader's browser. If you simply rush straight in with advanced code, your readers will be flooded with error messages. There are two methods of support detection, one far superior to the other.
This page was last updated on 2012-08-21
Object Detection
If you're going to be using JavaScript in any capacity you will soon find out that certain features of JavaScript are not supported by certain browsers. Advanced scripts will therefore die a death in old versions of most browsers, and even some of the current generation. While it seems logical to simply do a check on which browser the reader is using through the navigator object and base your coding on that, there are too many obstacles in the way for this to be of much use (more on that below). This is where object detection comes in — you can write a simple if () statement to check if a certain object, method, array or property that you need is supported. If it isn't, the browser will not be given the advanced code.
As a side note, the original plan for object detection was that it would be achieved using the language attribute of the script tag. When you have
<script language="JavaScript 1.2" type="text/javascript">
any browser that doesn't support JavaScript 1.2 methods was supposed to bypass this whole block of code. Of course, on this side of the infamous browser wars this method of detection is next to useless, as in their rush to support things, the two main browsers didn't give a second thought to supporting the same things; and so JavaScript 1.2, for example, doesn't refer to any one standard. The language attribute should always be set to simply "JavaScript", or omitted entirely, since at this stage its usefulness is fast approaching zero.
This is how we do it
Let's say we're setting up an image-flip script. This needs the document.images array if it's going to work, which is an array that you use to access each image on the page. So we check if this array exists (if a browser supports it, it is created when the page loads):
if (document.images) {
// it exists, so continue with the script using the array
}
If the array is not supported by the browser, the code within the if () statement is never executed, since the condition will evaluate to false.
When checking for a JavaScript method, you simply check its name, without the parentheses. For instance, before placing the browser focus on a window, we write
if (window.focus) {
// window.focus is supported
}
If you do include the parentheses you're not checking for support, you're executing the command. So, first check if the method is supported, and then execute the method:
if (window.focus) window.focus();
sourcetip: If the code that is to be executed inside an if () statement is only one line long, you can omit the braces around the code safely, as I have done above. Generally it is smarter to always use them though.
You don't need to do a method check before placing the focus on a form field, as this is supported by all JavaScript-enabled browsers. It's only at the window-level that inconsistencies arise.
Detecting DHTML Support
If you've been introduced to DHTML — possibly through DHTML Explained — you'll know that it's notoriously difficult to achieve, since the version 4 browsers introduced their own proprietary DOMs. You also have the standards-compliant DOM Level 1 to contend with. For true compatibility, you need to blanket-check for DHTML support, and then branch your code depending on which DOM the browser supports. First, the main DHTML check, which ensures one of the advanced models is supported:
if (document.getElementById || document.all || document.layers)
{
// browser can do DHTML
}
This uses the Boolean OR operator, ||, to check that at least one of the DOMs is supported. You can then go ahead and give the DHTML code. Each DHTML script will need to use more if () statements down the line before actually doing anything, giving different commands to browsers with different support. This code branching is covered elsewhere.
For really advanced scripts you'll need to use high-level parts of the Level 1 DOM, supported by Netscape 6, Mozilla, Konqueror and IE6. To test for support of the most advanced JavaScript methods, the code is
if (document.getElementById && document.createElement) {}
Browser Detection
Nearer to the beginning of the web, browser detection was where it was at. Doing a browser detect was seen as an 'easy' way out of having to code one version of a page that would work in all browsers. People would actually code two different versions of the same page and send their users to what they assumed was the appropriate version based on the results of a JavaScript browser detect. The script was, and still is, rather unreliable.
In the majority of cases, the browser detect will work as expected. For instance,
That information should be correct. If not, don't blame me. The result is based on your browser identification string, a code that each browser leaves available to your webpage to show what make and version it is. Your string looks like this:
However, nothing is guaranteed. Many of the smaller browsers, like Opera or Konqueror, give false information, identifying themselves as IE or Netscape so that they can get scripts to run which were only coded to support one of the big two. This leaves a huge gaping hole in the reliability of this script, since you could have any browser trying its luck on a page that it doesn't have a chance of dealing with correctly. So, browser detection is patchy now, and can only disimprove over time as new browsers appear. On the other hand, object detection works every time.
So, always try an object detection first, and only resort to a browser detect if you absolutely have to. The detect I'm using on this page is a pretty sophisticated one, coded by Peter-Paul Koch. His » browser detect page has the code and a detailed explanation of the navigator object that's vital for setting all of this up.
