The Problem:
Microsoft’s decision to change the way ActiveX objects are handled in Internet Explorer, following the patent law suit by EOLAS, has left the developer community in uproar. Soon all the ActiveX controls in Internet Explorer, among them Flash and Shockwave, will need to be activated by a click or a tab and an enter key before they can interact with the control. This is bound to impair the user experience of any website that embeds Flash – and there are many such sites out there - and make a good deal of trouble for the Flash developers, who are left to clean up the mess.
Available Solutions:
You can bypass the activation requirement by using an externally linked script, such as JavaScript, to embed the ActiveX content. There are currently available solutions for Flash, such as SWFObject and UFO. These work well for embedding new Flash content using JavaScript. But what about existing <object> tags, which will need to be rewritten, or browsers with disabled JavaScript? These would require an alternative solution.
ObjectSwap:
Neo-Archaic’s ObjectSwap solution (downloadable from www.neo-archaic.net/scripts/objectSwap.js) takes all these issues into account. It captures all existing <object> tags and replaces them with themselves. This forces an automatic activation in Internet Explorer, while leaving other browsers alone. Similar solutions have been developed in parallel, but this article will only concern itself with ObjectSwap. Although this solution was developed primarily with Flash in mind, it should also work with other ActiveX controls, such as Shockwave. The script affects all the <object> tags in the page, but the user can exclude specific objects by setting their class name to ”noswap”.
Implementation:
ObjectSwap was written with a view to make implementation as easy as possible, with minimum disruption to existing code. The only change needed to your html page is placing the script in the <head> tag for every page that includes ActiveX objects, like this:
<script type="text/javascript" src="scripts/objectSwap.js"> </script>
After that, you can keep on using your favourite technique for embedding ActiveX content. For Flash it’s either the Adobe/Macromedia default setting using object/embed tags, or the standards compliant technique that uses only the object tag (better known as Flash Satay).
How it Works:
First, the script cycles through all the <object> tags in the html source code and retrieves their outerHTML value:
var objects = document.getElementsByTagName ('object');
for (var i=0; i<objects.length; i++){
var o = objects[i];
var h = o.outerHTML;
Since Internet Explorer does not include any of the Object’s param tags in its outerHTML (or innerHTML), they need to be extracted separately into a string:
var params = "";
for (var j = 0; ji<o.childNodes.length; j++) {
var p = o.childNodes[j];
if (p.tagName == "PARAM"){
....
params += p.outerHTML;
}
}
The generated “params” string is spliced into the outerHTML code:
var tag = h.split(">")[0] + ">";
var newObject = tag + params + o.innerHTML + " ";
And, finally, the new generated html replaces the original:
o.outerHTML = newObject;
Hiding The Objects:
There are still a few things to be done. First of all, we want to prevent the objects from loading twice - once when they are initiated in the html code, and again after they are swapped. This is achieved by writing a new stylesheet to the document before the page loads. The style uses display:none to take the object out of the document’s flaw and delay their loading until the swap is complete:
document.write ("<style id='hideObject'> object {display:none;} </style>");
After the swap, the style is disabled and the objects are allowed to load:
document.getElementById("hideObject").disabled = true;
Initiating The ObjectSwap:
The function must be called after all the objects have loaded by binding the objectSwap() function to the window.onload event. The catch, however, is that other linked scripts in your page might have their functions bound to the same event; the last script to do so will override all the earlier bindings, causing other scripts to fail. This is resolved by catching existing functions bound to the event, and calling them as well:
var tempFunc = window.onload;
window.onload = function(){
if (typeof (tempFunc) == "function"){
try{
tempFunc();
} catch(e){}
}
objectSwap();
}
This will naturally fail if following scripts use window.onload, so you must ensure that either this script comes last, or the following scripts use a similar technique.
Flash Detection:
So far, so good. But since we’re already using JavaScript, why not avail of the opportunity to add some Flash Detection to the mix? This can be achieved by adding a new param definition to the flash object, for example:
<param name="flashVersion" value="6" />
As it cycles through the parameters list, the script checks for the existence of this param and, if it finds it, calls the flash detection method. If it doesn’t find the Flash plugin, or the installed version number is less than the one required, the code turns the object into a simple <div> and displays the alternative content. This content must already reside inside the <object> tag, and display alternative text, images, links to the Flash installer, and so forth. The object tag normally ignores this content if Flash is present. Of course, you can also chose to ignore the flash detection option or use Adobe’s express installation for Flash 8 instead.
Browser Support:
The activation issue of ActiveX objects affects only Internet Explorer, and so most of the code will only affect IE. The flash detection code, however, needs to work with other browsers as well. This means that the objectSwap() function will be called for all the browsers, perform the flash detection service if required, but will only execute the Object Swap on IE, leaving other browsers unaffected.
Examples and Download:
You can find an example of this code in use on the Neo-Archaic home page and the images page in the gallery. Both pages use the Flash Satay method to embed Flash. The script is located here: http://www.neo-archaic.net/scripts/objectSwap.js .
A new examples bundle (last updated in Februray 2008) can be found here: ObjectSwap Update.
Hi Albin,
I’m sorry that it doesn’t work quite as it should, but ObjectSwap was never really meant for anything other than Flash, with whatever else it can “catch” as an added bonus. I’m glad to hear that the new script features help a little bit, but if you want to make it bullet proof, the only thing I can recommend at the moment is to exclude the quicktime object from ObjectSwap by marking the Object’s className with “class=noswap”, and then writing it into the page using an external JavaScript file with document.write. It’s a bit primite, I know, but if it works that’s all you need…
Karina
Hi Karina,
I’ve tried to write it in several ways (such as “document.write”, or “jQuery – jMedia”) and no one works better than yours, so I will continue using it.
In general the QT Player always has done strange behaviours with the cursor and doble monitors … and I think the problem goes beyond our posibilities to fix it.
Thanks for all.
- A.
Pingback: Mis movidas » Blog Archive » El Quick Time Player y sus efectos paranormales.
No problem, glad I could help a little bit
Hello from Germany! May i quote a post a translated part of your blog with a link to you? I’ve tried to contact you for the topic ObjectSwap: Bypassing the ActiveX Activation Issue in Internet Explorer « Neo-Archaic Blog, but i got no answer, please reply when you have a moment, thanks, Gedicht
Hi Gedicht,
I never got your original message… You’re welcome to use any parts of the blog, as long as you attribute it and leave a link. For the latest script see the post in http://neo-archaic.ie/blog/2008/02/more-ie-madness-object-swap-goes-oop/
Karina
yeah,I just believed you might wish to understand that your weblog is messed up when you view it on my iphone. I?m not sure if it’s something to try and do with my phone?s browser or your site? just declaring…
I have to agree with Hannelore. You have nice content, but it looks bad on a smartphone. You know you can use tools like Googles mobilizer to sort that out automatically. Anyway keep up the good work.