JavaScript 7: Plugin Detection

So you have just created some great new pages that utilizes the latest multimedia technologies such as Flash, Quicktime, or Shockwave. How do you ensure the rest of the world sees what you worked to hard to create? One answer might be the use of plugin detection with javascripts. This page provides a brief look at some javascript techniques to detect for the presence of a plugin and what you can do with that detection. Two methods exists for plugin detection be javascript: direct detection and loops with string matching.

Direct Detection

The first method is to test for the presence of the plugin by name. The script utilizes the object navigator.plugin["myFavoritePlugin"] to check the plugins installed in the visitors web browser. A javascript to check for the presence of the Shockwave plugin might look something like this:

  
<!-- This part goes in the <BODY> section
<script language="javascript" type="text/javascript">
<!-- Begin
	var myPlugin = navigator.plugins["Shockwave"];
	if (myPlugin)
		document.writeln("You have Shockwave installed!")
	else
		document.writeln("You don't have Shockwave installed!")
// End -->
</SCRIPT>

In this example the object navigator.plugins["Shockwave"] was assigned to the variable myPlugin. The the presence of the plugin was checked. This example uses the plugin test to determine which line of code to display on the browser. This can be modified to redirect the viewer to a plugin enhanced webpage or to a site where they can get the plugin. One limitation of this script is that you must know the exact name of the plugin and new versions of the plugin may require changes to your script.

Loops and String Matching

The second method uses a string matching approach to determine if the desired plugin is installed. This javascript starts by setting up a for loop to increment over all the installed plugins. Next the navigator.plugin[i].name.indexof("Flash") object is checked to see if the plugin name contains the desired string ("Flash" in this example).

  
<!-- This part goes in the <HEAD> section
<script language="javascript" type="text/javascript">
<!-- Begin
	hasFlash = false
	for (i=0; i<navigator.plugins.length; i++){
		if (navigator.plugins[i].name.indexOf("Flash") >= 0){	
			hasFlash = true
		}
	}
// End -->
</script>



<!-- This part goes in the <BODY> section
<script language="javascript" type="text/javascript">
<!-- Begin
	if (hasFlash) {
		document.write("You have Flash")
	}
	else {
		document.write("Sorry, you don't have Flash")
	}
// End -->
</script>

The present example utilizes the variable hasFlash to hold the result of the search. The variable is initial set to false and is only reset to true if the plugin is found. The variable is then used to control other scripting options further down in the document. The for loop used here can also be used to read out all of the plugins installed on the viewers browser. This is shown in some of the javascripts linked below. The for loop contains the variable navigator.plugins.length which returns the total number of plugins installed. Compared to the first example, this method should provide some better stability across version changes of plugin.

Comments

  1. Compatibility: Plugin detection with javascript only works well with the Netscape browser. Internet Explorer does not report the contents of the plugin objects listed above. ActiveX components of newer versions of the Internet Explorer browser should be able to download and run the desired plugin at load time, thus avoiding total failure.
  2. Script Placement: The scripts shown above can be place in the <HEAD> or <BODY> sections of the document. However, scripts placed in the <HEAD> section run before the entire page loads. Plugin detection in the <HEAD> could warn a visitor to your site that they do not have the required plugin prior to downloading any large multimedia files included in your pages.

More JavaScript Examples Utilizing Plugin Detection

The examples listed below provide further examples of what can be done with Plugin Detection by javascript.

  1. Installed Plug-ins - Displays a table listing all plugins installed on the visitors browser
  2. Plug-in Alert - Counts the numbers of installed plug-ins, generates and alert message, and displays installed plugins in a table.
  3. Plug-in test - Small script to check for the desired plugin and redirect the user.
  4. Check plugins - Checks for plugins to allow access to multimedia pages.
  5. User Detail - Displays in table format user browser information, plugins, mime types, and other information.

Credits

This page was created by Kent Holaday from javascript examples found in JavaScript for the World Wide Web, 3rd Edition by Negrino and Smith and scripts from the JavaScript Source. Examples were minimized to emphasize important details of script function. Examples are presented in a fashing that allows easy copying and pasting into the users own web pages scripts.


Page by Kent Holaday Last Update: Thursday, September 21, 2000
Find me at sholaday@indiana.edu http://php.indiana.edu/~sholaday/L578/proj2/js7.html