Home arrow JavaScript arrow Page 7 - JavaScript and Embedded Objects

JavaScript and Embedded Objects

There's more to Web browsers than (X)HTML, CSS, and JavaScript. ActiveX, plug-ins, and other embedded objects help make the Web what it is today. Get the scoop on these and more in this chapter excerpt from JavaScript: The Complete Reference, second edition, by Thomas Powell and Fritz Schneider McGraw-Hill/Osborne, ISBN 0072253576.

Author Info:
By: McGraw-Hill/Osborne
Rating: 4 stars4 stars4 stars4 stars4 stars / 92
October 26, 2004
  1. · JavaScript and Embedded Objects
  2. · Java
  3. · Including Applets
  4. · Accessing Applets in JavaScript
  5. · Issues with JavaScript-Driven Applets
  6. · Plug-ins
  7. · MIME Types
  8. · Detecting Specific Plug-Ins
  9. · Interacting with Plug-Ins
  10. · Refreshing the Plug-Ins Array
  11. · Interacting with a Specific Plug-In
  12. · ActiveX
  13. · Cross-Browser Inclusion of Embedded Objects
  14. · Interacting with ActiveX Controls
  15. · Summary

print this article

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)
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].
+ "</td></tr>");

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

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>');
  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.

McGraw-Hill-OsborneThis 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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials