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>

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?