In certain cases, we need only to determine if a browser supports a given object, method or property. This basically entails writing a conditional statement to first check whether the object, property or method exists, or is supported, before using such.
In many examples in this workshop, you will encounter something like:
el = document.all ? document.all [ id ] : document.getElementById ?
document.getElementById ( id ) : document [ id ];
This statement is used for initializing the object pointer. Since different browsers have different ways of pointing or referring to an object, we need some way of knowing which browser the viewer is currently using, and store the reference to our element the way the browser understands so.
That statement uses what is called a conditional operator, which basically says:
- if
document.all ( browser is IE4+ ), use document.all [ id ] to establish a reference to the object;
- else if
document.getElementById ( browser is dom-compliant, ex. IE5+, NN6+, etc. ), use document.getElementById ( id );
- otherwise, use
document [ id ] ( NN4 ).
In some cases, one can do it this way:
if ( document.all ) {
... statements for IE4/5
}
if ( document.getElementById ) {
... statements for DOM2-compliant browsers ( IE5/NN6 )
}
if ( document.layers ) {
... statements for NN4
}
This technique is also useful in cases where different brand browsers support the same property or method.
// checks whether the browser supports printing the window’s content
if ( window.print ( ) ) {
self.focus ( );
self.print ( );
}
In the example above, the conditional will return true and thus execute the statements, only for browsers that support the print ( ) method.
More examples of using this type of detection are discussed in specific demos elsewhere in the workshop. In the following sections, we learn how to use both types of browser detection to access elements in different browsers.
Some relevant references:
Next: Understanding Events