Microsoft, ActiveX and noscript
Microsoft did it again and now it affected much broader user-base. The funny thing is – I remember Flash fans used to say that Flash is a kind of interface that will run equally on each platform/browser. Sweet…
Since April 11th, all IE 6 patches (and IE 7 betas for that matter) deployed this ActiveX… thing. Read more about it at Adobe/Macromedia, it’s too ugly to write about it here. What bothers me is that it affects my favorite Flash embedding method. Well, I guess, without this occassional crap – the life would be boring and I would be probably enjoying a cup of coffee somewhere in the down-town.
Whichever method you choose to fix this, one thing is certain – you’ll have to do it with JavaScript.
The sample workaround is deployed on the latest project from Burza, the Hellgate: London web site (if you’re reading this in the monday eve CET, check it out tomorrow), so you might want to take a closer look at this live example.
Basically, all we did was replacing a noscript
content with some Flash embedding markup. The function for the external JavaScript file is:
/* parent id, flash object id, movie source, width, height, scale, salign, menu */ var ifl = function(eI,oI,m,w,h,scale,salign,menu) { var prnt = document.getElementById(eI); if (!prnt) return; var output = '<object id="' + oI + '" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="' + w + '" height="' + h + '">' + '<param name="wmode" value="transparent" />' + '<param name="allowScriptAccess" value="sameDomain" />' + '<param name="movie" value="' + m + '" />' + '<param name="quality" value="high" />' + (menu == 'false' ? '<param name="menu" value="false" />' : '') + '<param name="Loop" value="-1" />' + '<param name="Src" value="' + m + '" />' + '<param name="FlashVars" value="" />' + '<param name="Play" value="0" />' + '<param name="Loop" value="-1" />' + '<param name="SAlign" value="' + (salign == 'lt' ? 'lt' : '') + '" />' + '<param name="Base" value="" />' + '<param name="Scale" value="' + (scale == 'noscale' ? 'noscale' : 'ShowAll') + '" />' + '<param name="DeviceFont" value="0" />' + '<param name="EmbedMovie" value="0" />' + '<param name="BGColor" value="" />' + '<param name="SWRemote" value="" />' + '<param name="MovieData" value="" />' + '<param name="SeamlessTabbing" value="1" />' + '<embed src="' + m + '" quality="high" id="' + oI + '" name="' + oI + '" scale="' + scale + '" salign="' + salign + '" menu="' + menu + '" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="' + w + '" height="' + h + '" />' + '</object>'; prnt.innerHTML = output; };
Cheating, right? Yes, but it’s also the fastest to render. Belive me, we tried a lot of methods. Plus, as I said many times before – users first, standards second.
This is sample HTML chunk. You can call the ifl
function right after the corresponding element, right before the closing body
tag or perhaps with onload
event.
The most interesting fact is that if JavaScript is enabled – all the content inside noscript
tags is not rendered, i.e. images are not loaded. Do you see the benefits? Inside the noscript
tags you can create visually rich content wich will be loaded only if a user disabled JavaScript. Therefore the ‘test’ part of the JavaScript below. Try it to see what different browsers would ‘recognize’.
<div id="header"> <noscript> <!-- noscript content goes here --> <p>For full experience, please <strong>enable JavaScript</strong> and <a href="http://www.macromedia.com/software/flashplayer/">get Flash player</a></p> </noscript> </div> <script type="text/javascript"> /* <![CDATA[ */ // test START if (document.getElementById && document.getElementsByTagName) { var summ = ''; var ins = document.getElementById('header').getElementsByTagName('noscript')[0].childNodes; for (var i = 0; i < ins.length; i++) { summ += ins[i].nodeValue + ' ; '; }; }; alert(ins.length + ' : ' + summ); // test END ifl('header','flash_header','header.swf','300','200,'','','false'); /* ]]> */ </script>