WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Fun with Plug-ins
HTML Tips ‘n’ Tricks

by Scott Clark

Is there anything you can do to make the whole plug-in experience easier?

If you attended Spring Internet World in LA, you probably saw lots of Web browser plug-in vendors. They may have told you that their plug-in is going to revolutionize the Web. And a lot of the plug-ins that they were promoting were indeed very slick. There were plug-ins that allow the browser to view and/or hear VRML worlds, audio, video, a myriad of image formats, animation—the types of files for which there are plug-ins is virtually limitless. You may have seen a plug-in that would perform the exact function you need for your Web site. The big question is: how many people have that particular plug-in, and of those that don’t, how many will take the time and effort necessary to download and install the plug-in in order to view your page? And who is your audience—your company’s employees on your own intranet, or Web surfers coming from around the globe? How large is the initial download of the plug-in, and how big are the actual files that will use the plug-in, after the plug-in is installed? Is there anything you can do to make the whole plug-in experience easier? What plug-ins ship with the latest releases of the Netscape Navigator and Microsoft Internet Explorer? These are the questions we’ll answer in this column, and we’ll also show you how to use JavaScript to look for the plug-in, and if it isn’t already installed, let the client choose how to proceed. Sound interesting? Read on…

Let’s assume that you’ve found a plug-in that you feel your clients just can’t live without. We’ll need to know exactly which plug-ins ship with Netscape Navigator and Microsoft Internet Explorer. This is how it breaks down:

  • Netscape Navigator 3.0
    • Cool Talk, Live3D, LiveAudio, LiveVideo (AVI, VRML, AU, MIDI, AIFF, WAV) and QuickTime (.mov) are supported
  • Microsoft Internet Explorer 3.0
    • All standard video and audio formats (including AVI, VRML, AU, MIDI, AIFF, WAV, QuickTime, MPEG video and audio) are supported
In version 2 of both browsers, no plug-ins were included with the browser. With version 3.0, both Microsoft and Netscape had built several plug-ins into the browser. If the plug-in you are wanting to include on your site is on the list of the included plug-ins and file formats above, then you are in luck. Your job has been made a whole lot easier. The others that have it made are those that are designing a site for an intranet. On an intranet, the site designer has much more control over the software that is installed on the computers on the network. If you, (and your boss) agree that the company’s Web pages just won’t be the same without plug-in X, you can simply install the plug-in on all the computers on the network, and you’re set! Of course, most of us don’t have it that easy, so we’ll have to perform some JavaScript bit-twiddling. That is, first things first, we’ll need to detect the plug-ins that are installed in the browser and look for plug-in X. Here’s how we’ll do it:

 var OurPlugin = navigator.plugins["Shockwave for Director"]; if(OurPlugin){ document.write("You've got the Shockwave plug-in installed."); } 

In this example we’re simply telling you that, yes—you do have the plug-in installed. It is important to note that you must use the full name of the plug-in, not just part of it. For example,

 var OurPlugin = navigator.plugins["Shockwave"]; 

would not work. The full name must be written out as in the example below. In our real world example below, we will load the plug-in file instead of telling you that you have the plug-in:

 navigator.plugins.refresh(true); var OurPlugin = navigator.plugins["Shockwave for Director"]; if(OurPlugin){ document.write('<EMBED SRC="spiral.dcr" WIDTH=350 HEIGHT=350>'); } else { document.location.href = "http://www.macromedia.com/shockzone/"; } 

As you can see, if the plug-in was not there, we’d take the client to get the plug-in from the plug-in vendor’s site using document.location.href. The user’s browser would simply go to the vendor’s plug-in site (Macromedia’s site is used in this example). The line:


automatically refreshes Netscape, so if the user just came from the Macromedia site (www.macromedia.com) and had loaded the Shockwave plug-in, they wouldn’t have to restart the browser in order to view the plug-in that is embedded in your page. You could have instead informed the client that they need the plug-in and where to get it, or you could have loaded an alternative media object (such as an image or gif animation), in place of the plug-in file.

As you can see there are a lot of choices to be made concerning plug-ins. And all is well if your client is using the Netscape Navigator, but what about those using the other browser (and yes—I am aware that there are more than two—but we’re going to focus on the two most commonly used browsers in this column), Microsoft Internet Explorer? IE 3.0’s JScript doesn’t include the navigator.plugins object, so the above code wouldn’t work. A good solution would be to check to see which browser we’re dealing with. We explained how to do this in a previous HTML Tips and Tricks column (Jan/Feb ‘97 Web Developer®), but to briefly go over it again:

 agent = navigator.userAgent var Version = 2; if (agent.indexOf("MSIE") != -1)Version = 1; 

navigator.userAgent tell us what browser Agent the client is using. In our plug-in example above, we’d add the browser detection and an appropriate action:

 agent = navigator.userAgent var Version = 1; if (agent.indexOf("MSIE") != -1)Version = 2; // Our example only checks for MSIE; all others are simply Version1. // In a real world example, it may be better to test for the specific // browser and supply the appropriate action. if (Version == 1){ navigator.plugins.refresh(true); var OurPlugin = navigator.plugins["Shockwave for Director"]; if(OurPlugin){ document.write('<EMBED SRC="spiral.dcr" WIDTH=350 HEIGHT=350>'); document.write('<BR>'); document.write("You've got the Shockwave plug-in installed."); }} if (Version == 2) document.write("You're using MSIE, so I can't tell if you've got the plug-in."); 

The question remains, what do we do if they’re using MSIE? Well, one of the really slick features of MSIE is the fact that if you embed an object into a Web page, and MSIE doesn’t already have a plug-in installed for, it will go out on the Internet, download the plug-in, install it, and run the embedded object—all without any intervention from the user. While I can see all the security techs out there doing backflips about this little feat, I found it to be extremely useful and intuitive (and it is configurable)! Also, if MSIE is unable to locate the necessary plug-in, it automatically tries to find an ActiveX control that does the same thing. Of course, you do have to understand that the download for the Shockwave plug-in, for instance, is over one megabyte, so it is going to take more than a couple minutes to download (if you are on the most common connection—28.8). Will your clients stay on the page while the plug-in is being downloaded or go will they "click" through to another page? That is another question you need to ask yourself. You could use document.write to give the client a choice between using the plug-in object, downloading the plug-in, or using an alternative object such as a gif animation. If you don’t want to give your client that much time to think, then you may just want to use an image for MSIE, and the plug-in for Navigator (after checking to see if the client has the plug-in installed).

Choices, choices and yet more choices! That’s exactly what the Internet is all about. The client can choose to visit a site, they can choose to leave, they can choose whether or not to fill out your survey, or use your plug-in. Giving your site’s visitors a choice is to empower them. An empowered visitor is a visitor that’ll be coming back. Actually, the personalized Web is the Web of the future. That’s what CNET, MSN and Netscape have figured out with their personalized intro pages, and that’s what the new rave of the Web—push technology, is all about. But that’s another column…

If you have any tips and tricks—or questions, that you’d like us to tackle, please pass them on to us at sclark@webdeveloper.com. If we use your tip, you could earn the prestige and honor of your Web colleagues, a nifty Web Developer® prize pak, and your name in print. We all love to learn new Web techniques and tricks…that’s why you’re reading this column, right?

Web Developer® Site Feedback
Web Developer®
Copyright © 2000 internet.com Corporation. All rights reserved.

HTML5 Development Center

Recent Articles