Using ActiveX and Plug-Ins with JavaScript- 123docz.net

18_051511 ch15.qxp 4/13/07 6:24 PM Page 596

However, not all plug-ins require data from an external source and therefore a value for the src attribute. In such situations, how can the browser tell what plug-in to load? Well, that’s where the

Figure 15-2

You’ll see a list of all the plug-ins installed on your browser. The value required for the typeattribute is listed as the Multipurpose Internet Mail Extensions (MIME) type, which specifies a type of content such as a web page, an image, or a Flash file. For example, the MIME type for Flash is application/x- shockwave-flash.

In addition to a number of attributes common to all plug-ins, you can also use the <embed/>element to specify properties specific to a particular plug-in. For example, the Flash plug-in supports the quality attribute, which determines the image quality of the Flash movie. To set this attribute in the <embed/>

element, you just add it to the list of attributes set, as shown in the following example:

src=”topmenu.swf”

border=0

597

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 597

height=100 width=500 quality=high

type=”application/x-shockwave-flash”

</embed>

Although Firefox supports the <embed/>element, it also supports the use of the HTML standard

Checking for and Installing Plug-ins in Firefox

After you decide what type of plug-in you want to embed into the page, what happens if the browser finds that this particular plug-in does not exist on the user’s computer?

To solve this problem you can set the pluginspageattribute of <embed/>to point to a URL on the plug- in creator’s page. If the plug-in is not on the user’s computer, a link to the URL specified in the pluginspageattribute will be displayed within the web page. The user can click the link and load the plug-in so that your web page will function properly.

For example, with Flash the pluginspageattribute needed is this:

PLUGINSPAGE=”http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=

ShockwaveFlash”>

However, if the user doesn’t have the plug-in installed, you might prefer to send her to a version of your web site that doesn’t rely on that plug-in. How do you know whether a plug-in is installed?

The navigatorobject, introduced in Chapter 5, has a property called plugins, which is an array of Pluginobjects, one for each plug-in installed on that browser. You can access a Pluginobject in the pluginsarray either by using an index value that indexes all the plug-ins installed on the user’s browser, or by using the name of the plug-in application.

Each Pluginobject has four properties: description, filename, length, and name. You can find these values by viewing the plug-ins information page that you saw earlier.

Let’s use Flash as an example. Type about:plugins in the location bar and press enter. Figure 15-3 shows the Installed plug-ins page in Netscape, but this page remains largely the same in Firefox 2. You can see that Flash has Shockwave Flashas its nameproperty. The filenameand descriptionproperties have obvious meanings. The lengthproperty gives the number of MIME types supported by the plug-in.

Internet Explorer has a navigator.pluginsarray, but it is always empty.

598

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 598

Figure 15-3

As mentioned earlier, the nameproperty can be used to reference the Pluginobject in the plugins array. So, the following code will set the variable shockWavePluginto the Pluginobject for Flash, if it’s installed:

var shockWavePlugIn = navigator.plugins[“Shockwave Flash”];

If it’s not, navigator.plugins[“Shockwave Flash”]will return as undefined.

You can use the following to redirect users on browsers that do not have installed the plug-in you need:

if (navigator.plugins[“Shockwave Flash”]) {

window.location.replace(“my_flash_enabled_page.htm”);

} else Length

Name

Description File name

599

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 599

{

window.location.replace(“my_non_flash_page.htm”);

}

If the Flash plug-in is not installed, navigator.plugins[“Shockwave Flash”]will be undefined, which JavaScript considers to be false, thereby causing the elsestatement to execute. If Flash is installed, navigator.plugins[“Shockwave Flash”]will return the Flash Pluginobject, which JavaScript treats as true, and the main ifstatement will execute.

The problem with this method of detection is that the name given to a plug-in may vary from operating system to operating system. For example, the name of the Windows XP version of the plug-in may vary from the name of the Mac version, which in turn may vary from the name of the Linux version. Some plug-ins, such as RealPlayer, will not work reliably at all with this detection method, because the name is not simply RealPlayer but something that contains the word “RealPlayer.”

An alternative method for determining whether a plug-in is installed is to loop through the plugins[]

array and check each namefor certain keywords. If you find them, you can assume that the control is installed. For example, to check for RealPlayer, you may use the following:

var plugInCounter;

for (plugInCounter = 0; plugInCounter < navigator.plugins.length;

plugInCounter++) {

if (navigator.plugins[plugInCounter].name.indexOf(“RealPlayer”) >= 0) {

alert(“RealPlayer is installed”);

break;

} }

The forloop goes through the navigator.pluginsarray, starting from index 0and continuing up to the last element. Each plug-in in the array has its nameproperty checked to see if it contains the text RealPlayer. If it does, you know RealPlayer is installed, and you break out of the loop; if not, RealPlayer is clearly not installed.

An alternative to using navigatorobject’s plugins[]array is using the navigatorobject’s mimeTypes[]array, which contains an array of mimeTypeobjects representing the MIME types supported by the browser. You can use this array to check whether the browser supports a specific type of media, such as Flash movies.

You have already come across MIME types before — the typeattribute of the <embed/>element can be used to specify a MIME type so that the browser knows which plug-in to embed. Again, using the About Plug-ins option on the Help menu, you can find out what the MIME types are for a particular plug-in. In fact, one plug-in may well support more than one MIME type. When you check for a particular MIME type, you are checking that the browser supports a particular type of file format rather than necessarily a particular plug-in.

For example, you may use the mimeTypesarray to check for the Flash plug-in as follows:

if (navigator.mimeTypes[“application/x-shockwave-flash”] &&

navigator.mimeTypes[‘application/x-shockwave-flash’].enabledPlugin) {

600

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 600

window.location.replace(“my_flash_enabled_page.htm”);

} else {

window.location.replace(“my_non_flash_page.htm”);

}

The ifstatement is the important thing here. Its condition has two parts separated by the AND operator &&.

The first part checks that the specified MIME type is supported by trying to access a specific mimeType object in the mimeTypesarray. If there is no such object, then undefinedis returned, which, as far as an ifstatement goes, means the same thing as if falsehad been returned.

The second part checks to see not only that the MIME type is supported, but also that a plug-in to han- dle this MIME type is enabled. Although unusual, it is possible for a MIME type to be supported, or rec- ognized, by the browser, but for no plug-in to be installed. For example, if the user has Microsoft Word installed, the MIME type application/mswordwould be valid, but that does not mean a plug-in exists to display it in the browser! The enabledPluginproperty of the mimeTypeobject actually returns a Pluginobject, but again, if it does not exist, nullwill be returned, which will be considered as false by the ifstatement.

What happens if someone browses to your page with a browser that has no support at all for plug-ins?

Well, the <embed/>elements will be basically ignored, and if the browser does support script, errors will occur if you access the plug-in through your script. To get around this, use the <noembed/>element.

Anything in between the opening <noembed>tag and the closing </noembed>tag is ignored by a browser that supports the <embed/>element, so you can put a message in there telling users that the page requires a browser that supports plug-ins.

<h2> This page requires a browser that supports plug-ins </h2>

</noembed>

You can also use object checking to avoid errors with different browser versions.

if (document.embeds && document.embeds[0])

Checking for and Embedding ActiveX Controls on Internet Explorer

Although IE does support plug-ins to a certain extent, its support for ActiveX controls is more complete.

The main difference between an ActiveX control and a plug-in is how they are embedded into a page and how they are installed. Once they are embedded and installed, their use, as far as scripting goes, will be very similar to that for plug-ins.

ActiveX controls are a little like mini-programs, usually created in languages like C++ or Visual Basic.

Unlike normal programs, like Notepad or Microsoft Word, ActiveX controls cannot run on their own; they

601

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 601

need to be sited in a container program. Not all programs can act as containers for ActiveX controls, only those specifically designed to do so, such as Microsoft Access and, of course, Internet Explorer. When the creator of the ActiveX control compiles his code, he also assigns it a unique identification string that enables programmers like you to specify exactly which control you want to embed in your IE ActiveX container.

Adding an ActiveX Control to the Page

Adding an ActiveX control to a page for an IE browser requires the use of the <object/>element. Two very important attributes of the <object/>element are common to all controls, namely classidand codebase. The classidattribute is the unique ID that the creator of the control gave to it when it was compiled. The codebaseattribute gives a URL where the ActiveX control can be found — you’ll look at this attribute in more detail in the next section.

How can you find out the classid? Well, one way to do this is by checking the documentation that came with the control or is available on the control creator’s web site. If you have the control installed, another way to do this is via IE itself, which will tell you which controls are installed on the computer and available to IE. Also, IE gives you additional information such as classid, though it won’t inform you about any controls that were installed with the operating system. For example, Flash 3 is installed with Windows 98 and therefore won’t appear.

To get this information, open up IE and select Internet Options from the Tools menu, as shown in Figure 15-4.

Figure 15-4

This opens up the console shown in Figure 15-5. In the Browsing history area, click the Settings button.

602

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 602

Figure 15-5

In the next console that opens, click the View objects button, shown in Figure 15-6.

Figure 15-6

603

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 603

This will display a list of all the ActiveX controls IE has installed from the Internet. The list shown in Figure 15-7 will most likely be different from that on your own computer.

You can see lots of information about each control, such as when it was created and its version number.

However, to find out the classid, you need to right-click the name of the control you’re interested in and select Properties from the menu that pops up.

Figure 15-7

The information shown in Figure 15-8 is displayed, though this may be slightly different on your system.

You can see that the classidattribute, listed as just ID, and the codebaseattribute, listed as CodeBase, are both displayed, although for codebaseyou may need to select the line and then scroll using the arrow keys to see all the information.

From this information, you see that to insert a Flash ActiveX control in your web page you need to add the following <object/>element:

id=flashPlayer1 width=500 height=100>

</object>

604

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 604

Figure 15-8

You can also set attribute or parameter values for the control itself. For example, with Flash you need to set the srcattribute to point to the .swffile you want loaded, and you may also want to set the qualityattribute, which determines the quality of appearance of the Flash movie. However, to set the parameters of the ActiveX control such as these (as opposed to the attributes of the <object/>element), you need to insert the <param/>element between the start <object>tag and the close </object>tag.

In each <param/>element you need to specify the name of the parameter you want to set and the value you want it set to. For example, if you want to set the srcattribute to myFlashMovie.swf, you need to add a <param/>element like this:

Let’s add this to the full <object/>element definition and also define the qualityattribute at the same time.

id=flashPlayer1 width=500 height=100>

</object>

Alternatively, you can use the movieparameter instead of srcparameter.

605

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 605

Installing an ActiveX Control

You’ve seen how to insert an ActiveX control into your page, but what happens if the user doesn’t have that control installed on her computer?

This is where the codebaseattribute of the <object>tag comes in. If the browser finds that the ActiveX control is not installed on the user’s computer, it will try to download and install the control from the URL pointed to by the codebaseattribute.

The creator of the ActiveX control will usually have a URL that you can use as a value for the codebase attribute. The information under the Internet Options option of the Tools menu you saw earlier provides the codebasefor the control that was installed on your computer, though this may not necessarily be the best URL to use, particularly if it’s not a link to the creator of the control.

For Flash, the codebaseis http://fpdownload.macromedia.com/get/shockwave/cabs/flash/

swflash.cab, so your <object>tag will look like this:

codebase=”http://fpdownload.macromedia.com/get/shockwave/cabs/flash/swflash.cab “ id=”flashPlayer1”

width=500 height=100 >

</object>

Subject to license agreements, you may be able to download the .cabfile that installs the control to your own server and point the codebaseattribute to that.

Unfortunately, there is no easy foolproof way of checking which ActiveX controls are installed on the user’s computer. However, the Objectobject of the <object/>element does have the readyStateproperty.

This returns 0, 1, 2, 3, or 4, indicating the object’s operational status. The possible values are as follows:

❑ 0— Control is un-initialized and not ready for use

❑ 1— Control is still loading

❑ 2— Control has finished loading its data

❑ 3— User can interact with control even though it is not fully loaded

❑ 4— Control is loaded and ready for use

You need to give the control time to load before checking its readyStateproperty, so any checking is best left until the window’s onloadevent handler or even the documentobject’s onreadystatechange event handler has fired.

To redirect the user to another page that doesn’t need the control, you need to write this:

var flashPlayer1;

//code to retrieve ActiveX plug-in if (flashPlayer1.readyState == 0)

606

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 606

{

window.location.replace(“NoControlPage.htm”);

}

Attach this code to the window’s onloadevent handler.

You saw that the <noembed/>element enables you to display a message for users with browsers that do not support plug-ins. This element works in exactly the same way with IE. Alternatively, you can place text between the <object>and </object>tags, in which case it will only be displayed if the browser is not able to display the ActiveX control.

Using Plug-ins and ActiveX Controls

When you have the plug-ins or ActiveX controls embedded into the page, their actual use is very uni- form. To make life easier for you, most developers of plug-ins and controls make the properties, methods, and events supported by each plug-in and ActiveX control similar. However, it’s important to check the developer’s documentation because it’s likely that there will be some idiosyncracies.

Inside the <embed/>or <object/>element, you give your plug-in or control a unique idvalue. You can then access the corresponding object’s methods, properties, and events just as you would for any other tag. The actual properties, methods, and events supported by a plug-in or control will be specific to that control, but let’s look at one of the more commonly available controls, RealNetworks RealPlayer, which comes in both plug-in form for Firefox and ActiveX control form for IE. You can find more information on this control at www.realnetworks.com/resources/index.html, and you can download a free version (RealOne Player) from www.realnetworks.com. Note that you can buy a version with more features, but if you search the web site, a no-charge basic version is available.

First you need to embed the control in a web page. Type the following into a text editor:

<html>

<head>

width=”0” height=”0”>

id=”real1”

border=”0”

controls=”play”

height=0 width=0

type=”audio/x-pn-realaudio-plugin”>

</object>

</head>

<body>

<h2>This Page requires a browser supporting Plug-ins or ActiveX controls</h2>

</noembed>

</body>

</html>

607

Chapter 15: Using ActiveX and Plug-Ins with JavaScript

18_051511 ch15.qxp 4/13/07 6:24 PM Page 607