Previous Page
Next Page

Detecting Objects

When you're scripting, you may want to check to see if the browser is smart enough to understand the objects you want to use. There is a way to do this check, which is called object detection.

What you do is pose a conditional for the object you're looking for, like this:

if (document.getElementById) {

If the object exists, the if statement is true, and the script continues on its merry way. But if the browser doesn't understand the object, the test returns false, and the else portion of the conditional executes. Script 3.5 gives you the JavaScript you need, and Figure 3.3 shows you the result in an obsolete browser.

Script 3.5. Object detection is an important tool for scripters.

window.onload = newCard;

function newCard() {
    if (document.getElementById) {
       for (var i=0; i<24; i++) {
          setSquare(i);
       }
    }
    else {
        alert("Sorry, your browser doesn't support this script");
    }
}

function setSquare(thisSquare) {
     var currSquare = "square" + thisSquare;
     var newNum = Math.floor(Math.random() * 75) + 1;

     document.getElementById(currSquare). innerHTML = newNum;
}

Figure 3.3. Object detection rejected this ancient browser (Netscape 4 for Mac) and displayed this error message.


To detect an object:

1.
if (document.getElementById) {



This line begins the conditional. If the object inside the parentheses exists, the test returns true, and the rest of this block in the newCard() function runs.

2.
else {
  alert("Sorry, your browser doesn't support this script");
}



If the test in step 1 returns false, this line pops up an alert, and the script ends.

Tips

  • In a production environment, it's better to give users something else to do, or at least some version of the page that doesn't require this capability. Here, though, there's nothing to be done.

  • It's important to understand that you won't always check for document.getElementById. What objects you check for depends on what objects your script uses. If your scripts use objects with less than 100% support, always check first if the browser can handle itnever assume that it can. We aren't showing object detection throughout this book to save space, but in the real world, it's vital.


Washed-Up Detectives

An alternate way to try to figure which objects a browser supports is to do a browser detect, which tries to identify the browser being used to view the page. It gets this by requesting the user agent string from the browser, which reports the browser name and version. The idea is that you would then write your scripts to work one way with particular browsers and another way for other browsers. This is an obsolete approach to scripting, because it doesn't work well.

Browser detection relies on the fact that you know that a particular browser supports the script you're writing, and another browser doesn't. But what about obscure browsers that you've never used? Or browsers that are released after your script is done?

Worse, many browsers try to get around browser detection by intentionally misrepresenting themselves. For example, Apple's Safari browser claims that it is a Mozilla browser, even though it is not. And some browsers, such as Safari and Opera, allow you to set which browser you want it to report itself as.

There's just no way that you can retrofit your script fast enough to keep up with all of the possible browser permutations. It's a losing game.

The same goes for attempting to detect which version of JavaScript a browser supports. We strongly suggest that you do not use these detection methods, and use object detection instead.



Previous Page
Next Page