InformIT: Sams Teach Yourself JavaScript in 24 Hours

Working with Plug-In Objects

The JavaScript navigator object, which you learned about in Hour 9, "Working with the Document Object Model," includes a child object called plugins. This object is an array, with one entry for each plug-in installed on the browser.

Each plug-in has an entry in the array. Each entry has the following properties:

name is the name of the plug-in.
filename is the executable file that was loaded to install the plug-in.
description is a description of the plug-in, supplied by the developer.
mimeTypes is an array with one entry for each MIME type supported by the plug-in.

You can use these properties in a script to find out about the installed plug-ins, as you'll see in the next section.

Checking for Plug-Ins

What if you want to use a hot new plug-in on your pages, but you know that not everyone has the plug-in installed? One of the handiest uses for JavaScript is to detect a plug-in before loading the page that contains that plug-in's content.

For example, the following simple script checks for the QuickTime plug-in (or any other plug-in that handles QuickTime movies). If a plug-in is found, the script writes the <embed> tag to include a movie in the document. If not, it displays a still image.

test=navigator.mimeTypes["video/quicktime"];
if (test)
   document.writeln("<embed SRC='quick.mov' HEIGHT=100 WIDTH=100>");
else
   document.writeln("<img SRC='quick.gif' HEIGHT=100 WIDTH=100>");

If your script does not detect the appropriate plug-in, you can provide a link to the download location for the plug-in or to a non-plug-in version of the page.

Listing Plug-Ins

As an example of the plugins array, you can use JavaScript to list the plug-ins supported by your browser. Listing 16.1 shows a script that lists the plug-ins in a table, with filenames and descriptions.

Example 16.1. Listing plug-ins with JavaScript

<html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<h1>List of Plug-Ins</h1>
<hr>
<p>The following is a list of the plug-ins installed in this
copy of Netscape, generated using the JavaScript
navigator.plugins object:</p>
<hr>
<table BORDER>
<tr><th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>
<script LANGUAGE="JavaScript" type="text/javascript">
for (i=0; i<navigator.plugins.length; i++) {
   document.write("<tr><td>");
   document.write(navigator.plugins[i].name);
   document.write("</td><td>");
   document.write(navigator.plugins[i].filename);
   document.write("</td><td>");
   document.write(navigator.plugins[i].description);
   document.write("</td></tr>");
}
</script>
</table>
</body>
</html>

The action of the script is performed by the <script> section in the body. This begins with a for loop that loops from 0 to the number of plug-ins (the length property of the plugins array).

The document.write statements within the loop display the properties for a single plugin object, along with some HTML tags to make the table. This script's output in Netscape 6 is shown in Figure 16.1.

Figure 16.1 The list of plug-ins as displayed by Netscape.

Using Objects in Plug-Ins

You now know how to use the navigator object's properties to detect plug-ins. You can also use objects to manipulate plug-ins themselves.

Each embedded object in a document is represented by an element in the embeds array, which is a child of the document array. For example, if a document contains a single embedded object, it is represented by document.embeds[0].

The properties and methods of the embed object depend on the plug-in in use. For example, the LiveAudio plug-in includes play and stop methods for controlling audio output. Some plug-ins may not be scriptable at all.

Workshop: Playing Music with the Mouse | Next Section

Previous Section