WebReference.com - Part 3 of Chapter 6 from Designing with JavaScript (3/4)

To page 1To page 2current pageTo page 4
[previous] [next]

Designing with JavaScript, 2nd Edition

With this script, Navigator and IE/Mac users are taken care of, IE/Windows users have Flash automatically downloaded as a control, and anybody else can decide what they want to do. The script is shown in Example 6-11.

<html>
<head>
<title>A Smart Flash Page</title>
<script language="JavaScript">
var browser;
// Determine if browser supports mimeTypes array
if (navigator.mimeTypes && navigator.mimeTypes.length != 0) {
  browser = "mimeTypes"
}
else {
  browser = "noMimeTypes"
}
</script>
</head>
<body>
<script language="JavaScript">
// If browser supports mimeTypes...
if (browser == "mimeTypes") {
  // Display Flash plug-in on page if detected
  if (navigator.mimeTypes["application/x-shockwave-flash"]) {
    document.write('<embed src="movie.swf" height="320" width="240">');
  }
  // Otherwise display links to download plug-in or view non-Flash site
  else {
    document.write('<p><a href="http://www.macromedia.com/downloads/"> ');
    document.write('Download Flash Player</a>');
    document.write('<p><a href="noflash.html">Enter Non-Flash Site</a> ');
  }
}
// For IE, use object tag to open movie in Flash ActiveX control or 
// download it if it isn't available
else if (navigator.appName == "Microsoft Internet Explorer") {
  document.write('<object ');
  document.write('classid="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000"');
  document.write('codebase=');
  document.write('"http://download.macromedia.com/pub/shockwave/cabs/ flash/
swflash.cab#version=4,0,2,0"');
  document.write('width="240" height="320" name="Flash" id="movie">');
  document.write('<param name="src" value="movie.swf">');
  document.write('<param name="bgcolor" value="#000000">');
  document.write('</object>');
}
// Otherwise, display links to enter Flash and non-Flash sites, as
// well as download the plug-in
else {
  document.write('<p><a href="flash.html">Enter Flash site</a>');
  document.write('<p><a href="noflash.html">Enter Non-Flash Site</a>');
  document.write('<p><a href="http://www.macromedia.com/downloads/">');
  document.write('Download Flash Player</a>');
}
</script>
</body>
</html>

Example 6-11: Code for a Flash detection script

  Pesky details
 

In Example 6-11, we actually check for the presence of navigator.mimeTypes and verify that the length of the mimeTypes array isn't zero:

if (navigator.mimeTypes && navigator.mimeTypes.length != 0)

This is because IE on Windows systems actually defines a mimeTypes object but leaves it empty. Checking the length allows us to handle IE on Windows appropriately.

The script starts by checking whether the browser supports the navigator.mimeTypes array. The technique shown here is another form of browser version checking called object detection. Instead of checking the specific browser name and version, object detection checks for the presence of a particular object, in this case, the mimeTypes object. This is much easier than checking to see if the browser is Navigator 3 or later or IE 5 or later for the Mac, and it has the same results. If the mimeTypes object is supported, the browser variable is set to "mimeTypes" to indicate this; otherwise, the variable is set to "noMimeTypes".

If the browser supports mimeTypes, the script determines if the Flash plug-in is available, by checking for the application/x-shockwave-flash MIME type. If that MIME type is detected, we display the Flash movie using the embed tag. If the MIME type is not detected, we display links to download the Flash plug-in and to enter the non-Flash site.

If the browser is IE (on Windows), we display the Flash ActiveX control using the object tag. If this control is not available on the user's system, we give the user the option to download it, as shown in Figure 6-6.

Finally, if there's no way for JavaScript to detect the presence of Flash, we display a page with all possible options—enter the Flash site, enter the non-Flash site, or download the Flash plug-in—so users can decide on their own what to do.

Different versions of Flash?

What if you need to check for a particular version of the Flash plug-in? You might, for example, need to look for Flash Player 5, because your Flash movie makes extensive use of ActionScript. Rather than checking for application/x-shockwave-flash in the mimeTypes array, you can search the navigator.plugins array instead. The first step is to give "Shockwave Flash" to the plugins array to see if any Flash plug-in is available:

var plugin = navigator.plugins["Shockwave Flash"];

If a Flash plug-in is available, this statement returns an object that has a description property that contains the version number for the plug-in. Here's how we can get at that information:

if (plugin.description.indexOf("Flash 5") != -1)
    document.write("You have Flash 5!");

Note that the the plugins array has the same behavior as the mimeTypes array under IE on Windows systems: the plugins object is defined, but it doesn't contain anything.


To page 1To page 2current pageTo page 4
[previous] [next]

Created: December 27, 2001
Revised: December 27, 2001


URL: http://webreference.com/programming/javascript/designing/chap6/3/3.html