Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 3 ■ From DHTML to DOM Scripting
A lot of older scripts use this information to determine whether a browser is capable of supporting their functionality:
if(navigator.appName.indexOf('Internet Explorer')!=-1 && browserVersion.indexOf('6')!=-1)
{
document.write('This is MSIE! 6');
}
else
{
document.write('This isn\'t MSIE');
}
This appears rather clever at first glance, but it is not a bulletproof method of finding out which browser is in use.
For example, suppose you display the results of navigator.appName like this:
if(navigator.appName.indexOf('Internet Explorer')!=-1 && browserVersion.indexOf('6')!=-1)
{
document.write('This is MSIE! 6');
document.write('navigator.appName');
}
else
{
document.write('This isn\'t MSIE');
document.write(''+navigator.appName+'');
}
The results will show that in Chrome, Safari, and Firefox the appName is displayed as “Netscape”, a browser that
has not been developed since 2007. It only gets worse from here. Looking for navigator.userAgent will give you more
mixed results. For example, IE shows up as “Mozilla/4.0 (compatible, MSIE 7.0)” for IE 10 on Windows 7.
Reading out the browser name and version—commonly known as browser sniffing—is not advisable, not
only because of the inconsistencies I just pointed out, but also because it makes your script dependent on a certain
browser rather than supporting any user agent that is actually capable of supporting the script.
The solution to this problem is called object detection, and it basically means that we determine whether a user
agent supports a certain object and makes this our key differentiator. In really old scripts, like the first image rollovers,
you might have seen something like this:
// preloading images
if(document.images)
{
// Images are supported
var home=new Image();
home.src='home.gif';
var aboutus=new Image();
aboutus.src='home.gif';
}
www.it-ebooks.info
53