Chapter 30
Plug-ins

This chapter deals with JavaScript features that are not compatible with Netscape Navigator 2.0x and Microsoft Internet Explorer 3.0x.

In this chapter we do not discuss the connection between Java, JavaScript, and plug-ins, known as LiveConnect. LiveConnect is presented in the following chapter.

Embedding a Plug-in Object in HTML

A plug-in is a piece of software that the browser calls to process data referenced in an HTML document. In order to reference such data in an HTML tag, you must use the <EMBED> tag. This tag’s general syntax is as follows:

<EMBED
SRC=source
NAME=appletName
HEIGHT=height
WIDTH=width>
[<PARAM NAME=parameterName VALUE=parameterValue>]
[…<PARAM>]
</EMBED>

SRC=source specifies the URL containing the source content to be interpreted by the plug-in.

NAME=appletName specifies the name of the embedded object in the document.

HEIGHT=height specifies the height of the applet in pixels within the browser window.

WIDTH=width specifies the width of the applet in pixels within the browser window.

<PARAM> defines a parameter for the embedded object.

NAME=parameterName specifies the name of the parameter.

VALUE=parameterValue specifies a value for the parameter (an argument).

We will refer to such <EMBED> definitions as plug-ins, although that is not entirely correct.

Referencing Plug-ins in JavaScript

You can reference the plug-ins in your code by using the embeds array, a property of the document object. This array contains an entry for each Plugin object (<EMBED> tag) in a document, in source order. That is, the first Plugin object in the document is reflected by the first element of the array, document.embeds[0], and so on. The length property of this array, document.embeds.length, holds the number of Plugin objects in the document. Elements in the embeds array are read-only, so a statement such as the following has no effect:

document.embeds[0]="myVideo.avi"

It is important to understand that each element of the embeds array is a Plugin object. As you will see later in this chapter, referencing a Plugin object is very useful, because some plug-ins feature JavaScript methods.

You can also reference a Plugin object by its name. Take a look at the following HTML definition:

<EMBED SRC="rabin.avi" AUTOSTART=FALSE LOOP=FALSE HEIGHT=120 WIDTH=159
NAME="rabin">

Assuming this is the first plug-in in the HTML document, you can reference it via JavaScript in two ways:

1. document.embeds[0]
2. document.rabin

We recommend that you use the second fashion, because it is more convenient. It does not rely on the order in which the plug-ins are defined, so you do not have to modify your scripts if you choose to change the order of the plug-ins in the document. Secondly, you can choose meaningful names for your plug-ins so your code becomes much easier to understand.

Determining Installed Plug-ins with JavaScript

You can use JavaScript to determine if a user has installed a plug-in (the software). You can then display embedded plug-in data if the plug-in is installed, or alternative content if it is not. You can also determine whether a client is capable of handling a particular MIME (Multipart Internet Mail Extension) type. The navigator object has two properties for checking installed plug-ins:

• The mimeTypes object is an array of all the MIME types supported by the client. A MIME type can be supported either internally, via a helper application, or by plug-ins. Each element of this array is an object that has properties for its type, description, file extensions, and enabled plug-ins. The array is named mimeTypes, and each element is a mimeTypes object.
• The plugins object is an array of all the plug-ins installed on the client. Each element of this array has properties for its name and description as well as an array of mimeTypes objects for the MIME types supported by that plug-in. Each element of the plugins array is a plugins object.

In order to check if a plug-in is supported, you must know that plug-in’s name. The general syntax used to check if a specific plug-in is installed is as follows:

if (navigator.plugins["name of the plug-in"]) …

The name often consists of space characters or other non-alphanumeric characters, so it is a common practice to use the array notation, even if the “dot” syntax is possible. The following script segment checks if the Shockwave plug-in is installed, and provides data for that plug-in if it is:

if (navigator.plugins["Shockwave"])
   document.writeln("<EMBED SRC='myMovie.dir' HEIGHT=100 WIDTH=100>")
else
   document.writeln("You don't have Shockwave installed!")

Once you have installed a plug-in on your computer, it is very easy to find its name.

Some JavaScript programmers prefer to write a simple Boolean function to assist in determining whether a given plug-in is installed. Here is the function:

function isInstalled(plugName) {
if(navigator.plugins[plugName])
 return true
else
 return false
}

The following script checks whether the client is capable of displaying QuickTime movies.

if (navigator.mimeTypes["video/quicktime"])
   document.writeln("Click <A HREF='movie.qt'>here</A> to see
  a QuickTime movie")
else
   document.writeln("Sorry, can't show you any movies.")

You should use such plug-in detection routines with care, because they often conflict with LiveConnect routines located in the same document.