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. And the most popular plug-ins, such as Flash, QuickTime, and RealPlayer, are just about as likely to be installed as any given browser version. Finally, there are some things — complex animation, video, 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
Since 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, simply serving 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, since 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 what 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. Since 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 5 commonly-used 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 that for 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 involved dealing with the different browsers and their various plug-in-detection capabilities. For example:
Netscape has a navigator.plug-ins array, which 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 plugins. 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, which only works for the Windows version of Explorer). VBScript is rarely used, since it’s IE-only and a bit awkward, but there are some things (such as checking for ActiveX controls) which 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 on Netscape, using the navigator.plugins array.
Until very recently, there was no way to detect the QuickTime plug-in for Internet Explorer, since 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. (Since 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 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 if the plug-in is installed, there are several things you can do:
- You can use JavaScript to write out a message stating the plug-in wans’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.
- Finally, you can 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.');
View Examples:
Download Scripts
|
