How to use the PluginDetect Library

We assume here that you have a copy of PluginDetect, and that in the <head> of your webpage you have included this HTML:
       <script type="text/javascript" src="PluginDetect.js"></script>

You only need to add some javascript code to your web page to detect the plugins you are interested in.

The javascript methods available in PluginDetect are as follows:

PluginDetect.getVersion(pluginName):  [Returns string or null]
   Returns the version (as a string) of the installed plugin. If multiple versions are detected, then the highest installed version is returned. When getVersion() returns a version, it only means that the plugin is installed. It does NOT necessarily mean that the plugin is enabled.
   Returns null when the version could not be determined (when plugin is not installed/not enabled, or plugin is installed but the version information is unavailable).

By default, the returned version string is comma delimited and has the format of "A,B,C,D". If you wish to change the getVersion() delimiter, then use:
   PluginDetect.getVersion(delimiter) where delimiter is a string with exactly 1 character.

For example,
   PluginDetect.getVersion(".");   // set delimiter
   var version = PluginDetect.getVersion("QuickTime");    // version has format of "A.B.C.D"

PluginDetect.isMinVersion(pluginName, minVersion):  [Returns number]
   Returns 1 if plugin is installed & enabled and plugin version is >= minVersion.

   Returns 0.5 if plugin detection has been initiated but is not yet completed. At this point in time, the plugin appears to be installed & enabled (but this is not a certainty). Detection is occurring NOTF (Not On The Fly), so you will have to wait until the detection has completed. Only certain plugins (on certain browsers and platforms) require NOTF.
   In order to handle NOTF detection, it is recommended that you use the onDetectionDone( ) method or the onWindowLoaded( ) method. Either method will call an event handler after plugin detection has fully completed. The handler can call the isMinVersion( ) and getVersion( ) methods to obtain the final plugin detection results.

   Returns 0 if plugin installed & enabled but version is unknown (unable to determine if version >= minVersion).

   Returns -0.1 if plugin is installed & enabled, but plugin version is < minVersion.

   Returns -0.2 if plugin installed but not enabled. Some browsers occasionally reveal enough info to make this determination.

   Returns -0.5 if plugin detection has been initiated but is not yet completed. At this point in time, it is unknown whether the plugin is installed or not. Detection is occurring NOTF (Not On The Fly), so you will have to wait until the detection has completed. Only certain plugins (on certain browsers and platforms) require NOTF.
   In order to handle NOTF detection, it is recommended that you use the onDetectionDone( ) method or the onWindowLoaded( ) method. Either method will call an event handler after plugin detection has fully completed. The handler can call the isMinVersion( ) and getVersion( ) methods to obtain the final plugin detection results.

   Returns -1 if plugin is not installed or not enabled.

   Returns -1.5 if plugin status is unknown. This only occurs for certain plugins or certain browsers.

   Returns -3 if you supplied a bad input argument to the isMinVersion( ) method.

NOTE: Some of these return values are only possible for certain plugins or certain browsers.

PluginDetect.hasMimeType(mt): [returns mimetype object given by navigator.mimeTypes[mt] or returns null]
   The input mt is a string (or an array of strings) that specifies a mimetype (or an array of mimetypes).
   For example, let us say that mt = "video/quicktime". If the mimetype mt is present and enabled in the browser, and the corresponding plugin is present and enabled, then PluginDetect.hasMimeType("video/quicktime") will return the mimetype object given by navigator.mimeTypes["video/quicktime"]. If the mimetype mt is not present or not enabled in the browser, then PluginDetect.hasMimeType("video/quicktime") will return null.
   On the other hand, let us say that mt specifies multiple mimetypes such that mt = ["video/quicktime", "image/x-quicktime"]. Then PluginDetect.hasMimeType(mt) will return the mimetype object for either of these 2 mimetypes if either one is present and enabled. If neither mimetype is present and enabled, then PluginDetect.hasMimeType(mt) will return null.

PluginDetect.onDetectionDone(pluginName, f, ...): [Returns number]
   This method will initiate plugin detection when needed, and will execute the event handler f after the plugin detection results become available. onDetectionDone( ) can handle both OTF (on the fly) and NOTF (not on the fly) plugin detection. The event handler f automatically receives the PluginDetect object as an input argument such that we have f(PluginDetect){ ... }. You are free to use getVersion( ), isMinVersion( ), and getInfo( ) inside event handler f.
   Returns 1 if plugin detection is done (OTF) and handler f has been called.
   Returns 0 if plugin detection is not done yet (NOTF) and handler f has not been called yet. Handler f will be called after detection has been completed.
   Returns -1 if error (plugin name input argument not specified correctly).

PluginDetect.beforeInstantiate(pluginName, f):
   
Executes the event handler f immediately before PluginDetect attempts to instantiate the plugin. [By instantiate, we mean that an instance of the plugin is inserted into your web page. This will cause the plugin to start up and run, assuming it is installed.] The event handler automatically receives the PluginDetect object as an input argument such that we have f(PluginDetect){ ... }.
  Sometimes during detection, it may be necessary for PluginDetect to instantiate (or attempt to instantiate) the plugin. Should this attempt be neccessary, the event handler f will run first, and then the plugin will attempt to instantiate. [Note: If the plugin is installed and enabled, then it instantiates. If it is not installed or not enabled, then it will not instantiate. Either way, the handler f will run before the attempt is made.]
  In order for the beforeInstantiate() method to work correctly, you must place it BEFORE detection is started for the plugin. In other words, use it before getVersion(pluginName), isMinVersion(pluginName), and onDetectionDone(pluginName). As an example:
       var PD = PluginDetect;
       var F1 = function($){ ... };        // $ input arg is the PluginDetect object
       PD.beforeInstantiate('Java', F1);
       var F2 = function($){ var version = $.getVersion('Java'); alert(version); };
       PD.onDetectionDone('Java', F2, 'getJavaInfo.jar');

PluginDetect.getInfo(pluginName, ...): [object]
   Returns an object with several useful properties. For details on how to use this method with a specific plugin, see the specific plugin pages (such as for Java and Generic PDF Reader).

PluginDetect.onWindowLoaded( f ):
   Executes the event handler f after the browser window has fully loaded, and after the plugin detection results are available. The event handler f automatically receives the PluginDetect object as an input argument such that we have f(PluginDetect){ ... }. You are free to use getVersion( ), isMinVersion( ), getInfo( ), onDetectionDone( ), and beforeInstantiate( ) inside event handler f.

Event handler f without user input arguments:
   If the user does not specify any input arguments for event handler f, then the relevant PluginDetect methods are in the format of
       PluginDetect.onDetectionDone(pluginName, f, ...)
       PluginDetect.onWindowLoaded(f)
       PluginDetect.beforeInstantiate(pluginName, f)

When the handler f is executed it automatically receives the PluginDetect object as input such that we have f(PluginDetect){ ... }.

Event handler f with user input arguments:
   You may specify up to 3 inputs (ie. arg1, arg2, and arg3) for the event handler. The trick is to use an array such as [f, arg1, arg2, arg3]. The relevant PluginDetect methods are in the format of
       PluginDetect.onDetectionDone(pluginName, [f, arg1, arg2, arg3], ...)
       PluginDetect.onWindowLoaded( [f, arg1, arg2, arg3] )
       PluginDetect.beforeInstantiate(pluginName, [f, arg1, arg2, arg3])

When the handler f is executed it automatically receives the PluginDetect object as input such that we have f(PluginDetect, arg1, arg2, arg3){ ... }.


pluginName: [string input argument]
   The name of the plugin being detected.
   pluginName may have one of the following values: .
   pluginName is case insensitive.

minVersion: [string or number input argument]
   This is the minimum plugin version.
   Can be a string such as  "1,5,0,0" or "1.5" or "1,5,0,1" or "1.5.0.1" etc...
   Can be a number such as 0 or 1.5 or 1.50 etc...
   If minVersion is not specified, then PluginDetect will assume minVersion is "0".
   Strings are more versatile than numbers since "1,5,0,1" cannot be expressed as a number.


<div id="plugindetect"></div> container:  [optional HTML element in your web page to assist in plugin detection]
   PluginDetect sometimes needs to add <object> and/or <applet> tags to your web page to accomplish plugin detection (for Java, DevalVR, WindowsMediaPlayer, Silverlight, RealPlayer, Flash, Adobe Reader, PDFReader). These <object>/<applet> tags are all placed into the same <div id="plugindetect" ></div> container. If the user does not specify the <div id="plugindetect" > container in the web page, then the PluginDetect script will automatically add the container to the page when needed. When detection has been completed, the <div> and its contents will be removed from the DOM.
   If you wish to place your own plugindetect <div> into your web page, then you should obey the following rules:

1) The <div> container must be placed inside the <body></body>. You are allowed to nest the <div> inside another <div> if you wish.

2) The <div> must have an id of 'plugindetect' such that we have:
          <div id='plugindetect'></div>

3) The PluginDetect script must be able to find the <div> when it is doing detection. It finds the <div> using document.getElementById('plugindetect'). All this means is that the <div> must be rendered by the browser by the time that the plugin detection is occurring. For example, you are allowed to do this:
          <div id='plugindetect'></div>
          <script type="text/javascript">
              var version = PluginDetect.getVersion('Flash');
          </script>

You are also allowed to do this:
          <script type="text/javascript">
              var T = function(){var version = PluginDetect.getVersion('Flash');};
              PluginDetect.onWindowLoaded(T);
          </script>
         <div id='plugindetect'></div>

But you should NOT do this (because detection occurs before the div is rendered):
          <script type="text/javascript">
              var version = PluginDetect.getVersion('Flash');
          </script>
          <div id='plugindetect'></div>

4) Do not set the ccs visibility:hidden or display:none for the <div>. This could prevent the instantiated plugins from running properly.

5) PluginDetect automatically sets the <div> css properties for width, height, outline, border, padding, margin, display, and visibility. So you do not have to bother setting those yourself.

6) You are allowed to set the <div> css properties for position, left (or right), and top (or bottom). Note that position:absolute means that the <div> is positioned relative to its parent, and that it does not displace any other elements in your web page.
Here are a few examples of the <div> (we leave out the plugin detection code here for simplicity)...

  i) No css settings at all
       <body>
       <div id='plugindetect'></div>
       </body>

  ii) Here the <div> is positioned in the top left corner of the <body>
       <body>
       <div id='plugindetect' style='position:absolute; left:0px; top:0px;'></div>
       </body>

  iii) Here the <div> is positioned in the top right corner of the <body>
       <body>
       <div id='plugindetect' style='position:absolute; right:0px; top:0px;'></div>
       </body>

  iv) Here the <div> is positioned in the top left corner of its parent <div>
       <body>
       <div style='position:relative;'>
           <div id='plugindetect' style='position:absolute; left:0px; top:0px;'></div>
       <div>
       </body>

7) I do not recommend that you specify an absolute position that is off the screen, because I cannot guarantee how an instantiated plugin will behave in that case. You are free to experiment if you like, however. Here is an example where the <div> is off screen and therefore completely hidden from view:
       <body>
       <div id='plugindetect' style='position:absolute; left:-9999px; top:0px;'></div>
       </body>


NOTE: For some plugins, there is a more complete set of instructions available on the individual plugin pages. The plugins are listed in the menu in the left-hand column of this page.

There are also a few other methods/properties of PluginDetect that you may find useful:

PluginDetect.isIE:  [Boolean]
  [This property is independent from the navigator.userAgent]
   Returns true if the browser is Internet Explorer.
   Returns false if the browser is not Internet Explorer.

PluginDetect.verIE:  [null or number]
   [If you select the option "Use better Internet Explorer version detection" on the PluginDetect download page, then PluginDetect.verIE will equal (PluginDetect.verIEfull || PluginDetect.docModeIE). This means that PluginDetect.verIE will usually get its value from PluginDetect.verIEfull, and if that fails then it gets its value from PluginDetect.docModeIE. Either way, PluginDetect.verIE will virtually always be independent from the navigator.userAgent.]
   [If you do NOT select the option "Use better Internet Explorer version detection" on the download page, then PluginDetect.verIE will get its value from the navigator.userAgent.]
   Returns the version of Internet Explorer.
   Returns null if the browser is not Internet Explorer.

PluginDetect.verIEfull: [null or string]
   [This property is only available if you select the option "Use better Internet Explorer version detection" on the PluginDetect download page. This property seems to only work for 32 bit Windows. It does not appear to work for 64 bit Windows at this time.]
   Returns the FULL version (as a string) for Internet Explorer. The string format will be "AA.BB.CCCC.DDDD". This version string is independent of the browser's navigator.userAgent/document mode/browser mode.
   Returns null otherwise.

PluginDetect.docModeIE: [null or number]
   [This property is only available if you select the option "Use better Internet Explorer version detection" on the PluginDetect download page]
   Returns the document mode of Internet Explorer. This is basically the version of Internet Explorer that renders your web document. It tells you the level of HTML/CSS/Image support the browser has when displaying your web page. If the number is 6 or higher, then the browser is in Standards Mode. If the number is 5, then the browser is in Quirks mode.
   You can use PluginDetect.docModeIE to help dynamically select the proper CSS rules for each version of Internet Explorer. Traditionally, conditional comments have been used for this purpose, but conditional comments are no longer supported in IE 10+.
   Returns null otherwise.

PluginDetect.ActiveXEnabled:  [Boolean]
   Returns true if browser is Internet Explorer and ActiveX is enabled in the browser settings (ActiveX should be enabled in IE for PluginDetect to work).
   Returns false otherwise.

PluginDetect.ActiveXFilteringEnabled: [Boolean]
   Returns true if browser is Internet Explorer 9+ and ActiveX filtering is enabled in the browser settings. When filtering is enabled then most (but not necessarily all) plugins/addons will be disabled.
   Returns false otherwise.

PluginDetect.isGecko: [Boolean]
   Returns true if the browser is Gecko based (ie. Firefox, Mozilla, Netscape, Flock, SeaMonkey, K-Meleon, etc...).
   Returns false if the browser is not Gecko based.

PluginDetect.verGecko: [null or string]
   Returns a version number (as a string) of the Gecko version if the browser is Gecko based. The string contains the CVS branch tag of the source code used to create the version of Gecko in your browser. The branch tag is contained in navigator.userAgent and follows the string 'rv:'.
   Returns null if the browser is not Gecko based.

PluginDetect.isSafari: [Boolean]
   Returns true if browser is Safari, false otherwise.

PluginDetect.verSafari: [null or string]
   Returns a version number for Safari 3+.

PluginDetect.isChrome: [Boolean]
   Returns true if browser is Chrome, false otherwise.

PluginDetect.verChrome: [null or string]
   Returns a version number (as a string) of the Chrome browser.
   Returns null if the browser is not Chrome.

PluginDetect.isOpera: [Boolean]
   Returns true if browser is Opera, false otherwise.

PluginDetect.verOpera: [null or number]
   Returns a version number of the Opera browser.
   Returns null if the browser is not Opera.


Note above: it is normally frowned upon to use browser detection in one's Javascript, but in this case it appears to be necessary. Each browser has it's own particular quirks and bugs, and so PluginDetect needs to know which browser it is running on in order to make the plugin detection work a little more smoothly.



Definition of OTF & NOTF detection

Plugin detection is performed either "on the fly" (OTF) or "not on the fly" (NOTF) in your script.

If a single PluginDetect command (like PluginDetect.isMinVersion( ) or PluginDetect.getVersion( ) ) is able to initiate detection, complete that detection, and return a final detection result, then the detection is OTF. For example, the VLC Player plugin always uses OTF:

// Example # 1
//
// Plugin detection is initiated in the next line of code.

var status = PluginDetect.isMinVersion("VLC", "2");

// By the time the Javascript interpreter reaches this point, plugin detection
// for VLC Player will be complete.


The status variable in Example 1 will contain the final detection result for VLC Player. The status variable will have a value of 1, 0, -0.1, -0.2, or -1. Thus the detection was performed OTF (on the fly).

On the other hand, suppose we wanted to detect the Java plugin:

// Example # 2
//
// Plugin detection is initiated in the next line of code.

var status = PluginDetect.isMinVersion("Java", "1.6", "getJavaInfo.jar" );

// By the time the Javascript interpreter reaches this point, plugin detection
// for Java may or may not be complete. It depends on the value of the 'status' variable.


Depending on the browser/platform/Java version, the status variable in Example 2 could receive a value of -0.5 or +0.5. This means that plugin detection has not been completed yet. The status variable does not contain the final detection result for Java. Because the isMinVersion() method initiated detection but was unable to return the final detection result, we say that NOTF (not on the fly) detection is occurring.

[Note: It is also possible for the Java status variable to receive a value of 1, 0, -0.1, -0.2, or -1. That would be OTF.]

So, how do we handle NOTF to get the final detection result for Java? It's actually quite simple. We wait long enough until the detection has completed, and then query PluginDetect for the result. There are two ways to do this.

Here is the first way to handle both OTF and NOTF detection:

// Example # 3
//
// Plugin detection is initiated in the next line of code.

var status = PluginDetect.isMinVersion("Java", 0, "getJavaInfo.jar" );

var displayResults = function($$){

   var status = $$.isMinVersion("Java", "1.6");
   var version = $$.getVersion("Java");
   alert(status);

};

// Wait for window to load, then execute event handler
PluginDetect.onWindowLoaded(displayResults);


In the example shown above, we still initiate Java detection using PluginDetect.isMinVersion( ).

But now we also use the onWindowLoaded( ) method. The onWindowLoaded( ) method waits for the browser window to load, and then runs the event handler displayResults. Java detection, whether OTF or NOTF, will be fully completed by the time the browser window has loaded (assuming that Java detection was initiated before the window has loaded.)

The problem with using onWindowLoaded( ), however, is that you have to wait for the web page to fully load. It takes time to download all the images, scripts, etc.. from the server. And you might not want to wait that long to get your final detection results.


Thus, we show a second way to handle both OTF and NOTF detection:

// Example # 4

var displayResults = function($$){

   var status = $$.isMinVersion("Java", "1.6");
   var version = $$.getVersion("Java");
   alert(status);

};

// Plugin detection is initiated by onDetectionDone( ).
// When detection is completed, the event handler runs.

// onDetectionDone() will work for both OTF and NOTF.
PluginDetect.onDetectionDone("Java", displayResults, "getJavaInfo.jar");


The PluginDetect.onDetectionDone( ) method initiates the plugin detection, waits until the detection is done, and then runs the event handler.

The advantage here is that the onDetectionDone( ) method does not have to wait for the browser window to load. It only waits long enough for the plugin detection to complete. And thus we get a speed advantage over onWindowLoaded( ). In most cases, onDetectionDone( ) is the better way to go.



PluginDetect.onWindowLoaded( ) versus window.onload

If you decide to wait for the browser window to fully load in order to insure that NOTF detection has completed, then you should use the PluginDetect.onWindowLoaded( ) method. DO NOT USE window.onload, window.addEventListener("load"), or window.attachEvent("onload") in this case.

For example, the following is a script that you should NOT ever use for plugin detection:

// Example # 5
//
// Plugin detection is initiated in the next line of code.

var status = PluginDetect.isMinVersion("Java", 0, "getJavaInfo.jar" );

var displayResults = function( ){

   var status = PluginDetect.isMinVersion("Java", "1.6");
   var version = PluginDetect.getVersion("Java");
   alert(status);

};

// The window.onload event calls the displayResults event handler
window.onload = displayResults;


Here we are using window.onload instead of PluginDetect.onWindowLoaded( ). This is a mistake and should never be done. Why? Because it is remotely possible (in some cases) that a detection result may only be available immediately AFTER the window.onload event has fired, which is too late as far as displayResults( ) is concerned. For this reason, you should NOT use window.onload, window.addEventListener("load") or window.attachEvent("onload") in conjunction with NOTF plugin detection.

The PluginDetect.onWindowLoaded( ) method has been designed to avoid any such NOTF timing issues, and should thus be used instead. See example # 3 for the correct way to use the onWindowLoaded( ) method.

[Note: the onWindowLoaded( ) method will not interfere with any event handler you may have assigned to window.onload. This was done to maintain the unobtrusiveness of PluginDetect.]

[Note: even though you can use the onWindowLoaded( ) method to accomplish your NOTF plugin detection, I would recommend you use onDetectionDone( ) instead. The onDetectionDone( ) method is better suited for plugin detection.]



PluginDetect is Unobtrusive

The PluginDetect script has been made as unobtrusive as possible so as to not interfere with any other scripts you are using. It uses only 1 name in the global namespace: PluginDetect (an object). Any other variable names that you see in the PluginDetect script are local variables only, and will not affect the global namespace or any other scripts.

Some people have noticed that I use the '$' variable name in PluginDetect, and have wrongly assumed that this means that PluginDetect will interfere with the Prototype script (which defines a $() method). Again, the '$' variable in PluginDetect is a local variable only, and will not interfere with the global $() method of Prototype.




Top of Page