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

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

current pageTo page 2To page 3To page 4

Designing with JavaScript, 2nd Edition

Checking for plug-ins

[The following is the conclusion of our series of excerpts from Chapter 6 of O'Reilly's Designing with JavaScript, 2nd Edition.]

With the proliferation of plug-ins for various kinds of content on the Web, you never know whether a user will have just the right version of a plug-in for your content. Although most browsers try to help—by noticing when content requires an unavailable plug-in and asking if the user wants to install the plug-in—we can do better with JavaScript.

In Navigator 3 and later and IE 5 and later on the Mac, JavaScript has the ability to detect which plug-ins are installed in a browser and which file types (PDF, MP3, etc.) a browser supports. The two objects that allow for this are nagivator.plugins and navigator.mimeTypes. The first object, nagivator.plugins, contains the names and descriptions of all the plug-ins installed in the browser. The second, navigator.mimeTypes, indicates which file types the browser can handle.

  How do I find the MIME type for ...?

In Navigator, select Edit › Preferences › Navigator › Applications to get a list of plug-ins installed for your browser, along with their MIME types. You can also type "about:plugins" into the Location field or select Help › About Plug-ins; this displays a page that lists the installed plug-ins and their respective MIME types.

With IE on the Mac, select Edit › Preferences › Receiving Files › File Helpers to find the MIME types for different documents. On Windows systems, you'll need to use View › Folder Options › File Types from Windows Explorer, rather than Internet Explorer, to get a list of supported file types.

With IE on Windows systems, the process of determining whether a particular plug-in is supported is quite different, but, as you'll see shortly, we can still use some JavaScript to support these browsers.

File types

When a web server sends a document to a web browser, it includes some information about the type of file it is sending. The browser uses this information, called a MIME type, to determine how to handle the file - whether to display the contents in the window or launch the appropriate plug-in or helper application. For example, a PDF document has the MIME type application/pdf, and a Flash movie's MIME type is application/x-shockwave-flash. The MIME types that a browser supports almost always determine which plug-ins are installed. In other words, if a browser supports the MIME type application/x-shockwave-flash, the Flash plug-in is most likely installed.

To make use of JavaScript's ability to detect MIME types, we simply give nagivator.mimeTypes the file type that we are looking for, as shown in Example 6-10. If the file type is found, the object returns true; otherwise, it returns false.

if (navigator.mimeTypes["application/x-shockwave-flash"]) { 
    document.write("You have Flash!");
else { 
    document.write("You do not have Flash.");

Example 6-10: Checking for the Flash MIME type

Notice that the MIME type in question, application/x-shockwave-flash, is specified in double quotes, inside square brackets, after we refer to navigator.mimeTypes. That's because mimeTypes is actually an array that lists all the supported MIME types in the browser. But unlike the arrays we saw in Chapter 5, which used numbers to access their elements, mimeTypes uses string values instead. This kind of array is called an associative array.

  An associative array uses string values instead of numbers to access its elements.

Associative arrays are useful because they provide a more descriptive way to keep track of the elements in an array, by name rather than by number.

The if statement in Example 6-10 determines whether the Flash MIME type is present in the mimeTypes array. If there is an element defined for application/x-shockwave-flash, the if statement is true and the message "You have Flash!" is written to the screen. If there is no such element in the array, however, the if statement is false and the message is "You do not have Flash."

current pageTo page 2To page 3To page 4

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

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