http://www.adobe.com/devnet/activecontent/articles/devletter.html

advertisement
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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?
1
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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.
2
http://www.adobe.com/devnet/activecontent/articles/devletter.html



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
3
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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:
2.
3.
4.
5.
6.
7.
8.
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');
}
9. 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:
10. <script src="[path]/foo.js" type="text/javascript"></script>
11.
12.
Replace each <object>, <embed>, or <applet> tag with a call to
the appropriate external files as follows:
13. <script type="text/javascript">RunFoo();</script>
14.
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
4
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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.
o 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"
);
5
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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
6
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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/cab
s/flash/swflash.cab#version=7,0,19,0','width','550','height','400','align','m
iddle','src','foo','quality','high','bgcolor','#ffffff','name','foo','allowsc
riptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflash
player','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.
7
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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>
8
http://www.adobe.com/devnet/activecontent/articles/devletter.html
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-B84B0020AFBBCCFB','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
This content was authored by Adobe Systems, Inc.
9
Download