gcode-mirror / swfobject

Automatically exported from code.google.com/p/swfobject
0 stars 0 forks source link

Recommended Updates for IE11 #686

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
As you probably know, we've done some work in tandem with Microsoft to 
accommodate IE11 and their departure from many of the non-standard IE 
behaviors.  To this end, a number of items in SWFObject 2.2 are failing, and 
while it looks like some are addressed in SWFObject 2.3 beta, but because of 
the wide distribution on 2.2, I thought it might be useful to share some of our 
observations.

If you want any additional clarity or assistance from Adobe on these (or any 
topics, really), please drop me a note anytime.  We're happy to help.

For background,

index_dynamic.html uses embedSWF() :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 dynamic publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", 
"expressInstall.swf");
</script>
</head>
<body>
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img 
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>

In SWFObject 2.2, this will generate an <object> tag with a classid in Internet 
Explorer, which does not work in IE 11.
In SWFObject 2.3, this will use HTML5’s createElement() to construct an 
element for the player, and then it will set attribute type with our mime-type 
to indicate it’s a player instance — this works in all browsers.

index.html uses registerObject(), and it has the now common outer/inner 
<object> tag problems:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 static publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
width="300" height="120">
<param name="movie" value="test.swf" />
        <!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="300" 
height="120">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img 
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

This can be re-written as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 static publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object id="myId” name="myId" type="application/x-shockwave-flash" 
data="test.swf" width="300" height="120">
<param name="movie" value="test.swf" />
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img 
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
alt="Get Adobe Flash player" /></a></p>
</div>
</object>
</div>
</body>
</html>

It’s also worth reading the source of 
view-source:http://www.bobbyvandersluis.com/swfobject/testsuite_2_2/test_com.htm
l, because this also shows how FSCommand is broken (in IE 10 only) due to 
conditional comments around the IE specific event handler. You can fix that by 
applying the changes made to index.html, and by fixing the event handler — 
I’m a little unclear what the best practice is for the event handler. You can 
remove the conditional comments, but I think that generates a page error on 
non-IE browsers. So you need to dynamically add the event handler with 
something like 

if (navigator.appName == “Microsoft Internet Explorer”) {
var obj = swfobject.getObjectById("myCom");
obj.addEvent(“FSCommand”, myCom_DoFSCommand);
}

where IE 11 changed the appName, so this detects IE 10 or earlier, and 
addEvent() is an old IE DOM only function to create the event handler on our 
element. NOTE: If we recommend this code, we need to do some extensive 
compatibility testing. And maybe crowdsource to get better ideas. Or maybe we 
just document IE 10 users are hosed. They’ve been hosed since it came out, 
and no one seemed to notice.

Original issue reported on code.google.com by jecl...@adobe.com on 12 Jun 2015 at 9:02