Preparing your website to handle the Microsoft changes to Internet Explorer

Note: On November 8, 2007, Microsoft announced that, as a result of recent technology licenses acquisitions, the “click to activate” restrictions are no longer mandatory. Microsoft plans to remove the activation behavior from Internet Explorer in April 2008. Microsoft has indicated that developers will not need to make any modifications to existing websites; controls will function as they did before the activation change was made in April 2006. For the latest information about the update and information about preview releases, please read the Microsoft Developer Network article, Information for developers about Internet Explorer. The article on this page will remain until Microsoft implements the changes to Internet Explorer.

Many of you have heard about the announced changes to Microsoft Internet Explorer. You may have questions about what’s going to happen to your websites that use embedded (“active”) content and applications—which can include Adobe Flash, Adobe Acrobat, or Shockwave files. This article details the browser changes, active content workarounds, and resources you will need to make your websites compatible with the updated browser.

This article covers the following:

• How the changes affect current sites
• What code is affected and the general fix
• Two sample solutions of updated content
• Additional resources for updating active content

The Dreamweaver 8.0.2 Updater and Flash Active Content Update Extension include templates and code for publishing active content under the new guidelines. In addition, you can find more information in the Active Content Developer Center.

How will the browser changes affect my site?

Users will be able to view embedded content and applications in their present form—until they update their Internet Explorer browsers on Windows. The browser update was first released as an optional update in February 2006. After users update the browser, they have to click embedded or “active” content before they interact with it. Check out the resources on the Microsoft Developer Network (MSDN), where you can get more information.

Some sites will not be affected by the change. The updated browser prompts users to click before displaying active content coded using <object> , <embed> , or <applet> tags that are inline in an HTML file. However, HTML pages that use tags generated by external script files (like JavaScript)—such as sites that use complex Flash detection scripts—should continue to work normally with no change.

Note: Even though many browsers still support all three tags, the <embed> and <applet> tags are deprecated in favor of the <object> tag.

Many of you will want to fix your sites to work around the mandatory browser changes. The good news is that you can apply one of several workarounds to your site right now.

Requirements

Sample files:

• Download the JavaScript files (ZIP, 124K)

Note: This sample archive contains six files:

• AC_RunActiveContent.js: This is the file you use for the workaround for Flash and Shockwave content described in External JavaScript Solution 2: For Multiple Occurrences of Embedded Content.
• AC_ActiveX.js: Use this file for the fix described in the section, Solution for Other Active Content Types.
• SampleActiveContent.html: This file provides an example of the code you would use in your HTML page when using the AC_RunActiveContent.js and AC_ActiveX.js files.
• button1.fla: This file is the source file for the SWF.
• button1.swf: This file is the SWF that is embedded in the page.
• readme.txt: This is the Readme file that contains a description of the ZIP contents.

Getting started now: Fix for displaying active content

The HTML code affected by the change is anything that uses the <object> tag directly in the page. You will need to replace this tag with an external JavaScript file that writes the <object> tag from outside the actual HTML page.

Code you need to replace

Here’s an example of code (a simple <object> tag) that will not function as it did previously in the updated browser:

<object classid="clsid:D27CDB6E..." ... height="200">
    <param name="movie" value="foo.swf">
    <param name="quality" value="high" />
    <embed src="foo.swf" ... height="200"></embed>
</object>

If you replace this tag with a script that calls code outside of your HTML page, as described in the two following methods, it will continue to work in the updated version of Internet Explorer.

These examples of “before and after” code, provided by the Adobe development team, will help you update the HTML pages that host active content on your website.

We’ve tested this JavaScript fix; it works for common, current browsers. Check out the External JavaScript Solution Quality Assurance Test Matrix to see if it is a good solution for your site visitors.

External JavaScript solution 1: For single (or few) occurrences of embedded content

If your site has only one piece of embedded content, or only a few pieces, you may want to use the following simple solution. To implement this, you need to create a unique external JavaScript (JS) file for each page on your site that contains embedded content.

Note: If you have more than one piece of embedded content on a page, create unique functions (see Step 1) within the external JS file to document.write tags for each separate content piece. Also, please note that this solution is not included in the sample files; simply follow the instructions below to create the new code from code that exists in your current HTML page.

The steps to do this are as follows:

1. Create and place the external JS file on your site. In this example, call it foo.js. This script needs to document.write the full <object>/<embed> tag that was previously in your HTML file:

   function RunFoo()
   {
      document.write('<object classid="clsid:D27CDB6E..." ... height="200">\n');
      document.write('<param name="movie" value="foo.swf" />\n');
      document.write('<param name="quality" value="high" />\n');
      document.write('<embed src="foo.swf" ... height="200"></embed>\n');
      document.write('</object>\n');
   }

2. Add a JavaScript include statement that points to the JavaScript file from Step 1 to the <head> section of the web page that embeds the content:

   <script src="[path]/foo.js" type="text/javascript"></script>

3. Replace each <object>, <embed>, or <applet> tag with a call to the appropriate external files as follows:

   <script type="text/javascript">RunFoo();</script>

External JavaScript solution 2: For multiple occurrences of embedded content

If your site has a lot of embedded active content, or if you embed it in multiple ways, this solution gives you some big advantages. You can use a single external JS file for all of your embedded Flash and Shockwave content, instead of creating one for each affected file (as in Solution 1). The JS file contains functions that embed your active content based on parameters it receives from the main page.

There are three steps you need to follow to implement this solution:

1. Copy the external JS file that contains the workaround functions to a shared location on your website. Call it AC_RunActiveContent.js for this example, or other names that you choose.
   • Download the JavaScript files (ZIP, 124K)

   The code in the AC_RunActiveContent.js file uses arguments that you pass to it (see Step 3) to construct a complete tag string that it writes to your document.

2. Add a JavaScript include statement that points to the shared JavaScript files from Step 1 to the <head> section of each web page on your site that includes an <object>/<embed> tag:

   <script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>

3. Replace each instance of <object> and <embed> tags in your pages with the appropriate function calls. Here are two function calls for you to choose from: one for Flash content and one for Shockwave content.
   

   Flash content

   AC_FL_RunContent(
      "att1Name","att1Value",
      "att2Name","att2Value",
      ...
      "attnName","attnValue"
   );

   Shockwave content

   AC_SW_RunContent(
      "att1Name","att1Value",
      "att2Name","att2Value",
      ...
      "attnName","attnValue"
   );

   Note: These functions need JavaScript enabled to function. To let users with JavaScript disabled in their browsers view active content, follow each function with traditional <object>/<embed> tags within <noscript> tags, as described in the section, What About Users Who Have JavaScript Turned Off?

As you replace the <object> and <embed> tags with these new function calls, edit the argument pairs (represented by “att1Name”, “att1Value”) to include appropriate attributes and their values from your original tags, such as movie, id, bgcolor, etc. You can see an example of this code for a specific Flash file in the sample file SampleActiveContent.html, which is included in the sample file download.

When you edit the function call to pass the movie attribute, do not include the file extension with the movie name. Pass the movie name as follows:

AC_FL_RunContent(
   "movie","foo",
   ...
   "attnName","attnValue"
);

The external JavaScript code will add the appropriate extension.

If you are passing parameters to your Flash file, you might have an original movie attribute that looks like this:

foo.swf?username=Bob&color=red

To pass the name and color attributes successfully, include them as arguments in your function as follows, remembering to omit the file extension:

"foo?username=Bob&color=red"

Be sure to list your arguments in name/value pairs. You need to pass an even number of items to the AC_RunActiveContent.js code; otherwise it will not work. It also automatically inserts other required settings such as classid and mimeType as result of the player-specific function call. If you need to update the value of one of these required settings, edit these values within the AC_FL_RunContent() or the AC_SW_RunContent() functions, which you can find within the AC_RunActiveContent.js code. Within your HTML page, pass only the arguments for the optional parameters.

Here’s an example of how you would replace a standard inline <object> and <embed> tag that plays a Flash file using this method. If you needed to replace the following code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="550" height="400" align="middle">

   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="foo.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
<embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo"
align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

you would insert the following function call in its place:

<script type="text/javascript" >
AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0',
'width','550','height','400','align','middle','src','foo','quality','high','bgcolor',
'#ffffff','name','foo','allowscriptaccess','sameDomain','pluginspage',
'http://www.macromedia.com/go/getflashplayer','movie','foo' );
</script>

What about users who have JavaScript turned off?

Both of the above methods rely on JavaScript. A small percentage of visitors to your site may have disabled JavaScript in their browsers. The techniques suggested above will not work for these few users—they won’t see your embedded content at all. One thing to keep in mind is that many or most Internet Explorer users who have disabled JavaScript may have also disabled ActiveX support. However, users who have disabled ActiveX have not been seeing Flash and Shockwave content displayed in the browsers. The migration to JavaScript techniques for embedded content doesn’t alter or affect their experience. You need to be concerned only about users who have disabled JavaScript but have ActiveX enabled.

To provide for the small percentage of users who have disabled JavaScript but have enabled ActiveX, insert the <object> and <embed> tags directly into the HTML, but put them within a <noscript> tag. The <noscript> tag is a standard tag that provides fail-safe alternative code for users who have disabled JavaScript. Here’s an example of a standard embedded SWF file nested in a <noscript> tag:

<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="foo" align="middle">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="foo.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
<embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

Users who have JavaScript disabled will need to click to activate content in the updated browser when they visit a page with code similar to the above. After that, they can interact with the content as they did before.

Solution for other active content types

In the sample files accompanying this article, we are also including a JavaScript file called AC_ActiveX.js. You don’t need this script to display Flash or Shockwave content using the methods described above. However, developers who are working with other types of active content in web pages can use this script to display other types of content without requiring the user to click to activate it. Think of it as a kind of generic script that works with a broad range of content. You can use this script in much the same way you would use AC_RunActiveContent.js, as described in the steps above.

To implement this script, first include the external files in the <head> section of your HTML page using the following code:

<script src="[path]/AC_ActiveX.js" type="text/javascript"></script>
<script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>

Then, just as in the Flash/Shockwave method, replace the <object> and <embed> code, modifying the attribute and value pairs to fit your content:

<script type="text/javascript">
   AC_AX_RunContent( 'classid','clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFB','width','150',
'height','100','src','fakefile.foo' );
</script>

Note: You can also find sample code similar to this in SampleActiveContent.html, which is included in the sample file download.

Additional resources

Check out the resources on the Microsoft Developer Network (MSDN) at msdn.microsoft.com/ieupdate/ where you can get more information.

The article JavaScript Flash Player Detection and Embedding with SWFObject provides another method of embedding Flash content from external JavaScript files.

Stay tuned: Active Content Developer Center

Adobe is confident that you will be able to implement the fix on your site successfully using one of these methods. But we want to be sure, so we will continue to give you all the information we can as it becomes available. Please stay tuned to this site for any updates and new methods of displaying active content.

About the author