316 HOW: The Joy of JavaScript: Watching the Detection

WATCHING THE DETECTION

Problem: Your site absolutely requires that the user have a plug-in installed on her system (see Chapter 12 for more about plug-ins). Simply enough, use JavaScript plug-in detection (http://

www.javascriptworld.com/scripts/script02.08.html). But some browsers do not understand JavaScript plug-in detection, even though they perform many other JavaScript functions perfectly. What on earth can you do about that?

Solution: Load o’ code—JavaScript browser and platform detection code, that is.

Did someone say “complex browser and platform detection?” Oh, joy. An example of that very thing follows. Specifically, it is one of Juxt Interactive’s (see Figure 11.7) browser detection scripts of late 2000, written, in part, to compensate for the fact that Juxt uses the Flash plug-in extensively, and IE4.5/Mac (and earlier) did not recognize JavaScript’s plug-in detection method—though the browser was otherwise JavaScript-capable.

Figure 11.7

The gifted designers and programmers at Juxt Interactive rely heavily on the Macromedia Flash plug-in. Juxt must be certain its visitors have the plug-in installed before throwing heaps

of Flash content their way. JavaScript plug-in detection is the answer, but plug-in detection fails in some browsers. Juxt’s developers tackled this problem by writing the mother of all plug-in, browser, and platform detection scripts (www.juxtinteractive.com).

Taking Your Talent to the Web

317

If this entire chapter so far has you seriously contemplating a career as an oil painter, we suggest you skip the next few pages, at least for now. However, we should point out that what you are about to see is not so much complex as complete.

At first glance, the river of code you’re about to drown in looks like one advanced function after another. In truth it is just a few functions, repeated over and over again so that every browser version, on every possible platform, can be recognized and accounted for.

The first code torrent that follows lives in a global JavaScript file called sniffer.js. We’ll discuss global JavaScript files in a later section, “Going Global with JavaScript,” (just as soon as we get through this section).

The second river of ‘Script lives in an HTML page called testSniffer.htm.

Let’s examine them both, shall we?

Please don’t freak. Here’s sniffer.js in all its glory:

//////////////////////////////////////////////////////

//source: juxtinteractive.com

//description: Flash 3, 4 AND 5 Detection

//Author: [e-mail]

//credits: netscape communications (client sniff)

//Permission granted to reuse and distribute

//Last Modified: 10-03-00

//////////////////////////////////////////////////////

/////////////////////////////////////////

// Convert userAgent string to Lowercase

/////////////////////////////////////////

var agt=navigator.userAgent.toLowerCase();

///////////////////

// Browser Version

///////////////////

318 HOW: The Joy of JavaScript: Watching the Detection

var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion);

var is_ns = ((agt.indexOf(‘mozilla’)!=-1) && (agt.indexOf(‘spoofer’)==-1) &&(agt.indexOf(‘compatible’) == -1) && (agt.indexOf(‘opera’)==-1) &&(agt.indexOf(‘webtv’)==-1));

var is_ie = (agt.indexOf(“msie”) != -1);

////////////

// Platform

////////////

var is_win = ( (agt.indexOf(“win”)!=-1) || (agt.indexOf(“16bit”)!=-1) );

var is_win95 = ((agt.indexOf(“win95”)!=-1) || (agt.indexOf(“windows 95”)!=-1)); var is_win16 = ((agt.indexOf(“win16”)!=-1) || (agt.indexOf(“16bit”)!=-1) ||(agt.indexOf(“windows 3.1”)!=-1) || (agt.indexOf(“windows 16-bit”)!=-1) );

var is_win31 = ((agt.indexOf(“windows 3.1”)!=-1) || (agt.indexOf(“win16”)!=-1) ||(agt.indexOf(“windows 16-bit”)!=-1));

var is_win98 = ((agt.indexOf(“win98”)!=-1) || (agt.indexOf(“windows 98”)!=-1)); var is_winnt = ((agt.indexOf(“winnt”)!=-1) || (agt.indexOf(“windows nt”)!=-1));

var is_win32 = (is_win95 || is_winnt || is_win98 || ((is_major >= 4) && (navigator.platform == “Win32”)) || (agt.indexOf(“win32”)!=-1) || (agt.indexOf(“32bit”)!=-1));

var is_mac= (agt.indexOf(“mac”)!=-1);

/////////////////////////////////////

//Detect IE 4.5 on the mac

//Mucho Problemos with this browser

/////////////////////////////////////

var is_ie45mac = (is_mac && is_ie && (agt.indexOf(“msie 5.0”)==-1) &&(agt.indexOf(“msie 5.5”)==-1) && (agt.indexOf(“msie 4.5”)!=-1));

//////////////////////////////////////////

//Flash 3, 4 AND 5 Detection

//Last Modified: 10-03-00

//NOT checking for enabledPlugin (buggy)

//////////////////////////////////////////

var is_flash5 = 0; var is_flash4 = 0; var is_flash3 = 0;

if (navigator.plugins[“Shockwave Flash”]) { var plugin_version = 0;

var plugin_description = navigator.plugins[“Shockwave Flash”].description.split(“ “); for (var i = 0; i < plugin_description.length; ++i) { if (isNaN(parseInt(plugin_description[i])))

continue;

plugin_version = plugin_description[i];

}

Taking Your Talent to the Web

319

}

if (plugin_version >= 5) { is_flash5 = 1;

}

if (plugin_version >= 4) { is_flash4 = 1;

}

if (plugin_version >= 3) { is_flash3 = 1;

}

if (is_ie && is_win32) { // Check IE on windows for flash 3, 4 AND 5 using VB Script document.write(‘<SCRIPT LANGUAGE=”VBScript”\>\n’);

document.write(‘on error resume next\n’);

document.write(‘is_flash5 = (IsObject(CreateObject(“ShockwaveFlash.ShockwaveFlash.5”)))\n’);

document.write(‘on error resume next\n’);

document.write(‘is_flash4 = (IsObject(CreateObject(“ShockwaveFlash.ShockwaveFlash.4”)))\n’);

document.write(‘on error resume next\n’);

document.write(‘is_flash3 = (IsObject(CreateObject(“ShockwaveFlash.ShockwaveFlash.3”)))\n’);

document.write(‘<’+’/SCRIPT> \n’);

}

And now the browser and plug-in detector, as used in the HTML document:

testSniffer.htm:

<html>

<head>

<title>testSniffer - juxtinteractive.com</title>

<meta HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1”> <SCRIPT TYPE=”text/javascript” SRC=”sniffer.js”></SCRIPT>

</head>

<BODY BGCOLOR=”#000000” TOPMARGIN=”0” LEFTMARGIN=”10” MARGINWIDTH=”10”MARGINHEIGHT=”0” LINK=”#CCCC33” VLINK=”#CCCC33” ALINK=”#FFFFFF”TEXT=”#999900”>

<br>

<font FACE=”Verdana” size=”2”>

//////////////////////////////////////////////////////<br>

//source: juxtinteractive.com<br>

//description: Flash 3, 4 AND 5 Detection<br>

//Author: [e-mail]<br>

//credits: netscape communications (client sniff)<br>

//Permission granted to reuse and distribute<br>

//Last Modified: 10-03-00<br>

//////////////////////////////////////////////////////<br>

320 HOW: The Joy of JavaScript: Watching the Detection

<br>

<br>

<b>Function examples</b> <br>

(the page uses the external JS file “sniffer.js”) <br>

<br>

<br>

<script> <!--

if (is_ie45mac) {

document.write(‘It seems you are using IE 4.5 on the mac — a extremly buggy browser,you should consider upgrading to IE5 ASAP!\n’);

}

// Check Flash if (is_flash5)

{document.write(‘This browser can play FLASH 5 movies<br>\n’);

} if (is_flash4) { document.write(‘This browser can play FLASH 4 movies<br>\n’);} if(is_flash3) { document.write(‘This browser can play FLASH 3 movies<br>\n’);} else {

document.write(‘This browser CANNOT play FLASH movies<br>\n’);} //-->

</script>

<br>

<br>

</font>

</body>

</html>

Scared you, didn’t it? Scares us, too.

Don’t be alarmed. This is the province of web developers, not web designers. You would not be called upon to create JavaScript this detailed yourself. (Besides, if you ever are, you can use Juxt’s script. Note the comment:

“Permission granted to reuse and distribute,” an act of grace and kindness that is typical of the way web designers share information with their peers.)

There are things we dislike about these torrents of code besides the fact that they are torrents of code. Mainly we’re unhappy with the nonstandard, old-style “extended” HTML markup. This page would not validate. As HTML, it is not the best role model. As JavaScript, it will do ‘til the next browser upgrade comes along.