If you’re using Flash and you want the best possible coverage (meaning it works with users who don’t have JS turned on) while still using something like SWFObject where possible to get around the “click here to activate and use this control” ActiveX message in Internet Explorer, then take a look at the ridiculous pattern below.
Warning- not for the squeamish…
Here’s the HTML:
<!--[if IE]>
<noscript>
<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="1004" height="281">
<param name="movie" value="_assets/flash/homepage.swf" />
<param name="quality" value="high" />
<embed src="_assets/flash/homepage.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1004" height="281"></embed>
</object>
</noscript>
<![endif]–>
<!–[if !IE]> <–>
<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="1004" height="281">
<param name="movie" value="_assets/flash/homepage.swf" />
<param name="quality" value="high" />
<embed src="_assets/flash/homepage.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1004" height="281"></embed>
</object>
<!–> <![endif]–>
Here’s the SWFObject script served to Internet Explorer and ONLY Internet Explorer
<!--[if IE]>
<script src="_assets/js/swfobject.js" type="text/javascript"></script>
<![endif]–>
And here’s the SWFObject call:
//use conditional compilation to hide this call from non-IE browsers
/*@cc_on @*/
/*@if (@_win32)
if ($(”home”)){
var so = new SWFObject(”_assets/flash/homepage.swf”, “mymovie”, “1004″, “281″, “8″, “#336699″);
so.addParam(”wmode”, “transparent”);
so.write(”messaging”);
}
/*@end @*/
Before I go further, let me just say I’m counting the days until I can just dump a SWF into the page and be done with it. I hate all of these script based machinations to get a SWF out to the browser. This is code overhead that really bugs me…
Anyway, here’s the HTML logic.
- We use Microsoft’s conditional comments to show/hide content
- In the “This is IE” block we use a
noscript tag to present a traditional embed to IE users who might have JS turned off.
- Every other IE user with JS turned on will see the SWF embedded by SWFObject so no “click to activate and use this control” will be visible to the user. Since the majority of people on the web use IE and the majority of them surf with JS turned on, most users will fall into this category.
- Then, in the “This is not IE” block, we just embed the Flash the old school way. Since the Eolas suit doesn’t come into play with other browsers, embedding the SWF the old way is fine (at least in terms of the “click here…” nonsense.) As an additional benefit there’s no concern over whether or not the user has JavaScript turned on. JavaScript or no, the only issue is whether or not they have the plugin. Whereas with SWFObject there’s a possibility (however slim) that a user could have the Flash plugin installed but be surfing with JavaScript disabled. As I mentioned, this is for the best possible coverage… Also, if they don’t have the plugin they get the “download this plugin” notification. I head reports that that wasn’t happening with SWFObject running* so getting that to work properly is definitely a bonus. It was actually that bug report that got me into this whole mess
As for how it works technically, the following
<!--[if IE]>
Is read by IE as a test (if the browser is Internet Explorer.) Every other browser reads it as an open comment. Since it’s an open comment everything up until the close comment (<![endif]–>) will be ignored by non-IE browsers. IE, on the other hand will go ahead and process that markup normally since it recognizes that pattern as a conditional and its test will evaluate to true.
As a note, I don’t like using this stuff all over the place**, but in a situation like this conditional comments are a great option to have.
On the flip side All other browsers read this pattern:
<!–[if !IE]> <–>
As a completed comment, opened and closed on the same line. Therefore everything that follows is rendered normally by Firefox, safari and all the rest. IE, on the other hand, reads it as the beginning of a “If the browser is NOT IE” conditional. Since that resolves to false, everything down to the end of the conditional endif (<!–> <![endif]–>) is ignored by Internet Explorer. That allows us to go back to the future and embed flash in the old school way for everything but IE.
Oh the pain.
Still, if you absolutely need the best possible coverage and want to use SWFObject, this is a way to go. Is it the best? Probably not, since it’s horrifyingly hack-y and won’t validate. But it might be useful for someone out there…
*and I could figure out how to make it happen…
**I mostly use it to attach IE specific style sheets. For those of you keeping track, that looks like this:
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="STYLESHEET" type="text/css" href="_assets/styles/ie6.css" />
<![endif]>
<![if gte IE 7]>
<link rel="STYLESHEET" type="text/css" href="_assets/styles/ie7.css" />
<![endif]>
<![endif]–>