Javascript Tutorial -- Listing Available Browser Plugins

Back in Lesson 10, we introduced the "navigator" object, which we learned could be used to retrieve information about the client's web browser. This information can be used to customize the script in many ways, such as to detect what type of browser was being used (in case you needed to use a method or object that is available in some browsers, but not in others). In this lesson, we will learn about another method of the navigator object: the "plugins" method.

Suppose you are creating a web site that needs a way to deliver rich multimedia to the end user -- maybe it's an on-line education site, and you want to use Flash to make the site more interactive, or perhaps it's a site to showcase your band, so you want to use Windows Media Player or RealPlayer to deliver streaming audio or video. Unfortunately, you can't count on all of the visitors to your site having the required extensions installed in their browsers, so you want to be able to provide alternative content to these visitors (always, ALWAYS, ALWAYS do your best to provide alternative content to your visitors, especially if your web site is used for commercial purposes!). The navigator.plugins method will return an array containing a plethora of information about the plugins your visitors can use.

However, this information is not stored as a simple string returned by the plugins method. Instead, the plugins method is itself an object that contains additional methods which return pieces of this information. Here are some of the methods that, IMHO, are particularly useful:

Attribute	Function
length	Returns the number of elements in the "plugins" array.
description	Returns a brief description of the plugin.
filename	Returns the executable file of the plugin.
name	Returns the plugin name.

Because the "plugin" object is an array, you must iterate through the array to determine if a particular plugin is available. For example, suppose I want to write a script that requires a plug-in for Apple's QuickTime player. I would have to create a loop to search every member of the plugin array for an occurrence of "QuickTime", like so:

        <script type="text/javascript">
          <!--
            var i
            var QuickTime = /QuickTime/

            for (i = 0; i < navigator.plugins.length; i++)
              {
                if (navigator.plugins[i].name.match(QuickTime))
                  {
                    alert('Found QuickTime!')
                  }
              }
          //-->
        </script>
      

There are several other methods that are available to the navigator.plugins object, but these are the four that I find most useful.

Here is the example script for this lesson. Like the Javascript snippet above, it iterates through the navigator.plugins array, but rather than searching for a single plugin (that may or may not be present on *your* web browser), the example script instead lists all of the plugins found. It also uses the "createElement()", "createTextNode()" and "appendChild()" methods from the last lesson to write the data to the HTML document.