Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Plug-In Detection with JavaScript

by Nadav Savio and Apple Developer Connection
07/20/2001

Many web developers, myself included, have long mistrusted plug-ins -- and with good cause. By enabling proprietary file formats, plug-ins are by their nature antithetical to the open spirit of the Web. What's more, they often have significant limitations such as forcing content to appear in a box on the page or showing up as a broken icon if the plug-in hasn't been installed.

On the other hand, they are clearly far superior to HTML and dynamic HTML for a number of applications, multimedia being the most obvious. While some may continue to avoid the use of plug-ins, the most popular plug-ins -- such as Flash, QuickTime, and RealPlayer -- are just about as likely to be installed as any given browser version. And there are some things such as complex animation, video, and streaming audio that simply cannot be done in a browser without using a plug-in, so plug-ins are definitely here to stay.

Dealing with plug-ins

Because there are clearly times when it makes sense to use a plug-in, the question arises of how to deal with those who don't have the required plug-in installed. As Web developers, we have several choices. One option is to do nothing and simply serve the plug-in-dependent content. The trouble is that those that don't have the required plug-in will get a rather disturbing page with a broken plug-in icon where your beautiful multimedia should be.

Another option is to give visitors a choice between the plug-in version and the static HTML version of each page. Sometimes this may be the best choice, because it gives your visitors control over their experience. There are two problems, however. First of all, the choice itself interrupts a visitor's experience of the site. Second, it requires them to know which plug-ins they have installed. But why should they need to know? Many users don't know a plug-in from a spark plug.

The final and often best option, the one this script is designed to help with, is to check to see if each visitor has a given plug-in. If they do, you can go ahead and serve them the page with the plug-in embedded. If they don't, you can either serve a plain HTML version of the page, or point them to where they can download the necessary plug-in. (Since plug-in detection is not foolproof, as you'll see, you may also want to give visitors a choice at this point in case they do have the plug-in after all.)

The great advantage of plug-in detection is that it makes a much more seamless experience possible: Visitors only need to think about plug-ins (or even know such a thing exists) if they do not have one. Because plug-in detection is a notoriously tricky business, this script was written to make detection of the most common plug-ins as painless as possible.

The script's purpose

The script makes it easy to check for the existence of five of the most popular plug-ins: Apple's QuickTime, Macromedia's Flash and Shockwave for Director, Real Networks' RealPlayer, and Microsoft's Windows Media Player.

The script can also be used to redirect the browser to a new page if a given plug-in is (or is not) found.

Finally, the script reports whether detection is or is not possible.

Note: With some plug-ins, such as Flash and QuickTime, it is possible to check not only for the plug-in's existence, but for a specific version of the plug-in. However, version information is detected with greater ease and reliability from within a plug-in file. Further, that level of detail would add significantly to the size and complexity of this script. For these reasons I did not include version detection in this script.

Coding challenges

The main challenge involves dealing with the different browsers and their various plug-in-detection capabilities. For example:

Netscape has a navigator.plug-ins array that contains the names of plug-ins. This makes it quite easy to check for a given plug-in name.

On Windows, Internet Explorer has a navigator.plugins array, but it is always empty, so it can't be used to detect plug-ins. For Internet Explorer on Windows, you need to use VBScript (a whole separate language based on Visual Basic, which is only available to Explorer) to check for the ActiveX Control (a whole separate way of doing plug-ins that only works for the Windows version of Explorer). VBScript is rarely used because it's IE-only and a bit awkward, but there are some things (such as checking for ActiveX controls) that can only be done this way. Using VBScript is a bit tricky for several reasons:

  • Instead of ignoring VBScript like it should, certain versions of IE on the Macintosh will pop up an error message if there is VBScript on a page. To prevent the errors, I used JavaScript to write out the VBScript, but only on IE for Windows:

    <script language="JavaScript">
    if ((navigator.userAgent.indexOf('MSIE') != -1)
      && (navigator.userAgent.indexOf('Win') != -1))
      {document.writeln('<script language=
          "VBscript">');
        // write out rest of VBScript block here
        document.writeln('</scr' + 'ipt>');
      }
    </script>

    Note that I broke up the </script> tag that is written out. If I didn't do that, it would prematurely end the enclosing JavaScript block and cause all sorts of problems.

  • Only some versions of VBScript can do what we need, so we have to check the version number. We do this from within the VBScript:

    If ScriptEngineMajorVersion >= 2 then
        detectableWithVB = True
    End If

Until version 5, Internet Explorer on the Mac wasn't able to detect plug-ins at all, because there was neither a navigator.plugins array nor ActiveX controls to detect (or VBScript) to use to detect them. Thankfully, as of version 5, detection works as it does in Netscape, using the navigator.plugins array.

Until very recently, there was no way to detect the QuickTime plug-in for Internet Explorer because it wasn't implemented as an ActiveX control. But more recent versions of QuickTime install a separate ActiveX control specifically to allow you to check for the existence of the QuickTime plug-in. Unfortunately, this requires a slightly different strategy than the other plug-ins, so the script includes a separate VBScript function called detectQuickTimeActiveXControl(), which you will see below.

JavaScript, like any language, comes in different versions with different capabilities. From version to version, new capabilities are added and sometimes old ways of doing things are deprecated. So, for example, when this script redirects the browser to a new page (because the plug-in wasn't found), it's preferable to use the following:

window.location.replace('new_page.html');

instead of the older way:

window.location = 'new_page.html';

because this will preserve the use of the browser's Back button. However, this method is only available as of JavaScript 1.1, so the script first checks the version of JavaScript:

<script language="JavaScript1.1">
<!--
  // statements in this script block 
  //will only execute 
  // for browsers that support JavaScript 1.1
  javascriptVersion1_1 = true;
// -->
</script>

Then, later, the script chooses the redirection method based on the version of JavaScript available:

if(javascriptVersion1_1) {
  window.location.replace(daURL);
} else {
  window.location = daURL;
}

In case you're interested, Version 1.1 of JavaScript was implemented in Netscape 3 and Explorer 4. (Actually Explorer 4 jumped ahead to JavaScript 1.2, which subsumes 1.1.)

Using the script

Copy the contents of the script between the <head> and </head> tags in your document. (Because we're using multiple <script> blocks, it would require two separate .js files and wouldn't work for Netscape 3, so it makes more sense to just include the script in your document.)

To check for a given plug-in, simply call one of the following functions, which will return a value of either "true" (if the plug-in is there) or "false" (if the plug-in is not there or could not be detected):

  • detectQuickTime()
  • detectFlash()
  • detectDirector()
  • detectWindowsMedia()
  • detectReal()

For example, to check for the existence of the QuickTime plug-in, you could do the following:

var quickTimeIsInstalled = detectQuickTime();
if(quickTimeIsInstalled)
  alert('You have the QuickTime plug-in.');

Once you know the plug-in is installed, there are several things you can do:

Script Library

Download the source for this script here, and be sure to visit our JavaScript Library for other useful scripts.

Comment on this articleThis is a basic, but helpful application of JavaScript. And many plug-ins, such as Flash and QuickTime, are very popular. What are your thoughts?
Post your comments

  • You can use JavaScript to write out a message stating the plug-in wasn't found. You could also use JavaScript to write out the <object> and/or <embed> tags that pull the plug-in content if the plug-in was found.

  • You can put the detection code in a frameset and use JavaScript to write out different frame sources depending on whether or not the plug-in was found.

  • You can also use JavaScript to redirect the browser to a new page depending on whether or not the plug-in was found. The script makes it easy to do this redirection:

    • If you pass the function a URL, it will redirect to that URL if the plug-in is not found: detectQuickTime('non_plugin_page.html');
    • If, instead, you want to redirect if the plug-in is found, pass the function both a URL and the word true: detectQuickTime('plugin_found_page.html', true)

Finally, if you simply want to find out if detection is possible at all, do the following:

var ableToDetect = canDetectPlugins();
if(ableToDetect)
  alert('It is possible to check for plug-ins.');

Nadav Savio is a contributing author for Apple Internet Developer.


Return to the JavaScript and CSS DevCenter.