JavaScript and Embedded Objects - MIME Types
(Page 7 of 15 )
So how does the browser know what kind of data is appropriate for each plug-in? The answer lies in Multipurpose Internet Mail Extension types, or MIME types for short. MIME types are short strings of the form mediatype/subtype, where the mediatype describes the general nature of the data and the subtype describes it more specifically. For example, GIF images have type image/gif, which indicates that the data is an image and its specific format is GIF (Graphics Interchange Format). In contrast, CSS files have type text/css, which indicates that the file is composed of plain text adhering to CSS specifications. The MIME major media types are application (proprietary data format used by some application), audio, image, message, model, multipart, text, and video.
Each media type is associated with at most one handler in the browser. Common Web media such as (X)HTML, CSS, plain text, and images are handled by the browser itself. Other media, for example, MPEG video and Macromedia Flash, are associated with the appropriate plug-in (if it is installed). Keep in mind that a plug-in can handle multiple MIME types (for example, different types of video), but that each MIME type is associated with at most one plug-in. If one type were associated with more than one plug-in, the browser would have to find some way to arbitrate which component actually receives the data.
Detecting Support for MIME Types
Netscape 3+, Opera 4+, and Mozilla-based browsers provide an easy way to examine the ability of the browser to handle particular MIME types. The mimeTypes[] property of the Navigator object holds an array of MimeType objects. Some interesting properties of this object are shown in Table 18-1.
The browser hands embedded objects off to plug-ins according to the data that makes up each of these objects. A good way to think about the process is that the browser looks up MIME types and filename suffixes in the mimeTypes array to find the enabledPlugin reference to the appropriate plug-in. The programmer can therefore use the mimeTypes array to check whether the browser will be able to handle a particular kind of data.
Before delving into this process, it might be insightful to see what MIME types your Netscape browser supports. The following code prints out the contents of the mimeTypes[] array.
if (navigator.mimeTypes)
{
document.write("<table><tr><th>Type</th>");
document.write("<th>Suffixes</th><th>Description</th>
</tr>");
for (var i=0; i<navigator.mimeTypes.length; i++)
{
document.write("<tr><td>" + navigator.mimeTypes[i].type
+ "</td>");
document.write("<td>" + navigator.mimeTypes[i].suffixes
+ "</td>");
document.write("<td>" + navigator.mimeTypes[i].
description + "</td></tr>");
}
document.write("</table>");
}
Part of the result in a typical installation of Mozilla-based browsers is shown in Figure 18-4. Of course, you can also access similar information by typing about:plugins in the location bar of Netscape and Mozilla-based browsers.
| Property | Description |
| description | String describing the type of data the MIME type is associated with |
| enabledPlugin | Reference to the plug-in associated with this MIME type |
| suffixes | Array of strings holding the filename suffixes for files associated with this MIME type |
| type | String holding the MIME type |
TABLE 18-1 Properties of the MimeType Object
FIGURE 18-4 Contents of the mimeTypes[] array in Mozilla
To detect support for a particular data type, you first access the mimeTypes[] array by the MIME type string in which you are interested. If a MimeType object exists for the desired type, you then make sure that the plug-in is available by checking the MimeType object’s enabledPlugin property. The concept is illustrated by the following code:
if (navigator.mimeTypes
&& navigator.mimeTypes["video/mpeg"]
&& navigator.mimeTypes["video/mpeg"].enabledPlugin)
document.write('<embed src="/movies/mymovie.mpeg"
width="300"' + ' height="200"></embed>');
else
document.write('<img src="myimage.jpg" width="300"
height="200"' + 'alt="My Widget" />');
If the user’s browser has the mimeTypes[] array and it supports MPEG video ( video/mpeg) and the plug-in is enabled, an embedded MPEG video file is written to the document. If these conditions are not fulfilled, then a simple image is written to the page. Note that the pluginspage attribute was omitted for brevity because the code has already detected that an appropriate plug-in is installed.
This technique of MIME type detection is used when you care only whether a browser supports a particular kind of data. It gives you no guarantee about the particular plug-in that will handle it. To harness some of the more advanced capabilities that plug-ins provide, you often need to know if a specific vendor’s plug-in is in use. This requires a different approach.
 This chapter is from JavaScript: The Complete Reference, second edition, by Thomas Powell and Fritz Schneider, McGraw-Hill/Osborne, ISBN: 0072253576). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Detecting Specific Plug-Ins >>
More JavaScript Articles
More By McGraw-Hill/Osborne
/ 47 
