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 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: https://neo-archaic.ie/scripts/objectSwap.js .
A new examples bundle (last updated in Februray 2008) can be found here: ObjectSwap Update.
OBJECTSWAP is wonderfull, thxx for help =)
Hi Karina. I like the article, keep up the good work =]
Karina,
I got your great javascript and installed in one of my websites, it worked great…! until today! I noticed that my machine installed a new msft windows xp patch… do you know if msft broke this again?
Hi Antonio,
I tried installing the latest updates with both IE7 beta and IE6 (XP, sp2) and so far haven’t managed to break the script on my hompage or gallery page. Could you try these pages and see if they work on on your system? If they do, can you download the script again? I have made a few significant changes to it recently, although these mostly have to do with the way flash detection works. If none of this works, can you send me your system details and the appropriate link to your website?
Works great,
but I would use
instead of javascript detection
sorry your blog filtered it:
<!–[if gte IE 6]><script type=”text/javascript” src=”IEobjectSwap.js”></script><![endif]–>
Hi Joris, I appreciate your comments.
The idea is to make it as painless as possible for people to use the script, which is why I wanted the minimal amount of code on the html side. Also, the script offers a flash detection feature that isn’t just limited to IE, and I heard reports that some versions of IE6 already require a click – so it’s not just limited version 7.
Hi Karina,
I’ve been struggling with a few websites that I have. We are going to be applying the MS patch, so we are looking for solutions – yours looked very promising.
The pages we are implementing have ActiveX Pivot Table and Pivot Chart objects embedded on them. I implemented your solution, and the pivot table portion of the page worked great. The only problem is that the pivot chart appears to loose its link to the pivot table data. Any ideas? Thank you much in advance.
Aloha,
–Greg
Hi Greg,
I’m not sure why this is happening, since I’ve no idea what pivot table/charts are… I can think of two issues: either a pivot chart requires some parameters or attributes that get lost in the swap, or the objects need to be “re-pointed” to the link after they had been swapped (they don’t actually load until the swap happens). Does any of this help at all?
I just updated the script, fixing a bug with the window.onload method, changing the browser detection method and adding some more DOM object checking, for better robustness.
The link is the same – https://neo-archaic.ie/scripts/objectSwap.js
I have tried to use the coding but it does not work. it crashes IE and if it doesnt crash it just does not load the flash. I have uploaded the objectSwap.js file and added the into my page. Am i doing something incorrectly? Anything will help because I am losing my mind.
thank you
Anthony
Hi Anthony,
I can’t imagine why it’s not working for you, without seeing your html code. Can you try downloading the latest version (same location), and also see if there’s any difference between the source of my home page (www.neo-archaic.net) and your own html?
Karina
thanking for reciveing the my mail
send easy flash lession
I am waiting for you
Did anyone understand that…?
Hi Karina,
First of all, thanks very much for this quick and easy fix to what seems to be a very messy problem for web developers.
I installed your script and it work perfectly for embedded Flash. However, it does not work for other ActiveX types, e.g. mp3, mov, etc. Would it possible to make it work for the other types as well? From reading the article, my understanding is that the script is not limited to solving the Flash embedding problem, yet I still get the “Click to run an ActiveX control on this webpage” popup window on a page with embedded mov file even after applying your script.
Thanks again.
Kelvin
Hi Kelvin,
In theory, this should work with all ActiveX controls, as I’m simply reloading the outerHtml property of the Object tag, for any type of object. It’s possible, however, that some types have tags in their html that are not “seen” by the javaScript, like the Flash params that had to be switched manually. If you can email me the html code for the page with the controls that aren’t working for you, I could have a look and see what goes wrong there.
Karina
Hi Karina,
Thanks very much for your reply. The page that I am having problem with has an MP3 file embedded. Here is how I did it:
Between the and tags, I put:
The inside the tags where I would like to embed the MP3 file, I wrote:
When loading the page, I got a popup error window, asking me to click to activate ActiveX control on that page.
Anything else I missed?
Another question is: do we need to add the web page on IE trusted sites list in order for this to work?
Thanks again.
Kelvin
Hi Kelvin,
All your code has been filtered out of the comment… But I would prefer if you sent me an example page by email, or a link to a downloadable zip. Then, when I have a moment to breath, I’ll have a look at it and see if anything can be done.
Karina
Thanks for the solution…just recently caught up with this issue and very gald you are out there! I like the objectSwap file solution much better than patching with lots of js in the page. I’ve implemented the June 9th file for my Flash (swf) and Shockwave (dcr) and….
on IE 6 from Windows XP (at home) = swf & dcr works
on IE 6 from Windows 2000 sp4 (at work) = swf works; dcr does not run
on Foxfire 5 from Windows 2000 sp4 (at work) = swf & dcr works
Any quick thought on why IE 6 from Windows 2000 sp4 (at work) doesn’t behave well?
Thanks again
Terry
Hi Terry,
I’m glad I could help out with this solution 🙂
I can’t imagine what can be the trouble with your work browser. I’m using win XP and IE7 for testing over here. If you’re worried about the dcr not running, you can always exclude it with a “noswap” class name, but of course then it will need to be activated. A bit of a catch here…
If you have time and can decipher my code, maybe you can place a few alerts within the code to see what’s going on. My article on sitepoint (see the “Revisited” blog post) is a bit more detailed and up to date about the inner workings of the code.
Karina
Hi Karina,
Thanks for your reply. I have uploaded the page to: http://programs.siast.sk.ca/hu/analogueMediaForms.htm.
The zipped file can be downloaded from:
http://programs.siast.sk.ca/hu/Kelvin.zip
(937KB)
Thanks very much and looking forward to your reply.
Kelvin
Thanks karina.
Sorry, had to delete my previous comment, because the “object” and “embed” references were messing up the display of the page.
Basically, the problem is this: objectSwap only works with “object” ActiveX tags, and not embed tags.
I just made an attempt to add the embeds to the mix, and that didn’t work. First of all, the “click to activate” popup appeared even with the embeds hidden by JavaScript, and second, the swapped embeds didn’t display properly. So it seems that your only choice is to embed these using an external script.
Sorry there wasn’t more I could do.
Karina
Very nice solution… fast!:)
Only one tip… Windows Xp have to be patched whit the latest fixes.. whitout them strange behaviours happens.. the latest fix that solved my problems was released June 16th
thanks a lot
I just updated some of the code blocks within the article to reflect the changes and bugfixes that have taken place since it was published.
In particular, note the changes in the “Initiating The ObjectSwap” section, as similar code can be very useful in other situations.
Hi K
Thanks for the great fix.
I have one question though, this may have been covered somewhere
but i dont see this here.
I am using your script on a site of mine
But there is an initial 15-20 second delay before the flash pops up
If i check this on an unpatched ver of IE (so i dont get the dodgey click to activate message, the flash loads immediately).
I was wondering if you have come across this at all.
Thanks in advance and thanks for the great script 😀
Hi Bevan,
This sounds like a very long delay, and I haven’t come across something like this before. The script takes effect after all the elements on the page have loaded (using window.onload event), so it is possible that something on your page is causing it to load slower than usual. You could try adding a quick javascript alert to let you know when the window.onlaod event takes place. Hopefully this will help you track it down.
Best of luck,
Karina
Hi,
First, thank you Karina for this amazing script! It really Rocks!
And I had the same problem as Bevan. My onLoad event take a 10 second delay ´cause the page was full of images (the images need to be loaded before the onLoad evente takes place – as Karina explained in the above comment). To solve this I´ve used “addDOMLoadEvent”: http://www.thefutureoftheweb.com/blog/2006/6/adddomloadevent
Hope this may help you!
Hi Jesse,
Thanks for the great review 🙂
I had a quick look at the addDOMLoadEvent, and it seems like a great script! Just the sort of thing I’d been looking for…
Also loved your post on unobtrusive JavaScript – this is exactly what I tried trying to achieve here. If JavaScript is enabled – great; if not – you still have your embedded object.
Heya Karina,
good job, thx for sharing this!
The new Opera (v. 9) has the same “click to activate” behaviour, quite annoying… so maybe the script could check for that version too, besides IE? Dunno if the trick will also work in Opera though…
greetinx!
I’m glad you find it helpful 🙂
Do you know of a full-proof way of checking if the browser is Opera 9? This would help me to see if I can add it to the script – when I have a moment to breath, that is…
I don’t know much about browser checking. The user-agent string of Opera seems to always contain “opera”, even if it’s pretending to be another browser, so maybe a simple check for “opera” in that string is enough? Here’s some info about this: http://www.opera.com/support/search/supsearch.dml?index=570
cheers
Just a note to let you all know that the examples bundle has been updated with latest version of the ObjectSwap script, which supports Opera and excludes IE 5.x.
(Note that the latest version of script itself has been available from the direct link for a while now, but hadn’t been updated in the bundle.)
Karina
Hi Karina 😀
You know what?, i am developing a very similar (accidentally… believe me) solution since 2006. I am sure that ObjectSwap is better than similar solutionslinke SWFObject and UFO ;), but i think that my work (named jActivating) could contribute with your script because:
* Activates object, embed and applet elements.
* Prevents objects from loading twice using DOMContentLoaded event (and “defer” attribute for Internet Explorer).
* Latest development version (1.2.0 alpha) supports MIME type application/xhtml+xml.
* Latest development version could be compatible with others clients (i.e.: Gecko-based browsers) in future (it requires minimal changes).
Official website isn’t ready yet (at Sourceforge.net) but, if you want, i can send to you a copy of this work for your comments (it would be greatly appreciated).
Cheers,
David
pd: excuse my gramatical errors, i am not english native speaker.
Hi David,
That’s interesting – I couldn’t get Java applets to work with my code – they were crashing every time. ObjectSwap also prevents objects from loading twice, by setting their display to none before the page loads.
I’m not planning on doing any more development work on ObjectSwap at the moment, but it’s possible that your script could be an alternative for those who want to support Java.
You’re welcome to send me your code, but I can’t guarantee that I’ll have time to look at it, as I’m currently juggling a couple of projects…
Thanks,
Karina
PS: I’m not originally a native English speaker either. In fact, I’ve got three languages which are competing for the status of “native” (born with one, grew up with the other and now mainly use the third). And I don’t mean JavaScript or ActionScript 😉
Well, when Sourceforge project page is ready i will notify to you (don’t worry, i will understand if you are so busy).
“ObjectSwap also prevents objects from loading twice, by setting their display to none before the page loads[…]”
Yes, but if you are loading a video file with the OBJECT tag, Internet Explorer don’t make the object visible again (you can hear the audio, but don’t see the image). For that reason i had to reject that solution in my work.
See you later 😉
David
Hi again!
My script is now available at http://jactivating.sourceforge.net (graphic design and spanish translation in progress).
Thanks!!
Thanks David,
I’ll try and have a look when I’m a bit less swamped. But I’m sure some of the ppl that have commented here asking for Java Applet support might find your script helpful 🙂
Karina
Hi Karina!
I stumbled across a problem. I have site that uses your script so that my flash menu doesn’t have to be activated all the time. Unfortunately, when I scroll down with my mouse wheel on a longer page when the menu has almost left the visible screen, the menu loses focus and I have to reactivate it with a double click if I want to use it.
Thanks,
Peter
Hi Peter,
That sounds like a very odd bug indeed… I’ve never come across such a thing, and can’t seem to reproduce your problem on a long scrolling page. Maybe there’s something else on your page that interferes?
Karina
Hi,
first, let me thank you for this great piece of code!
I’ve been running into a strange issue right now with 2 flash movies (animated menus) interacting via a LocalConnection object: when using objectSwap for the autoactivation in IE7, both get activated, but the connection is not established. If I activate only one swf (the “sender” in the connection), it works, but the second one (receiver) has to be clicked to be activated, of course.
I will continue testing this, but just if anyone had to offer some ideas in this respect, I’d be grateful…
Bernhard
It was a Firefox bug, if the embed tag that holds a flash menu has a wmode parameter with a value of transparent then it loses focus while scrolling and has to be activated again. If the wmode parameter is removed than it works fine.
Peter
Hi Peter,
Thanks for sharing the solution, I’m glad it worked out for you.
Karina
Bernhard,
It’s really great to hear such good feedback 🙂
Maybe you could try swapping the positions of the sender and reciever clips in your html code? You can always reposition them visually on the page with css, but the html positioning controls which clip gets activated first. I don’t quite remember the code offhand, but I may have used a “repeat with in” loop, which itirates through objects backwards, which would mean that the second movie would load first.
Let me know how you get on,
Karina
Hello,
Excellent script, Karina!
Unfortunately, I cannot get it to work with my flash file. I have narrowed the problem down to one actionscript within my swf file, which I have copied and pasted here: .
The regular swf is embedded at the homepage of the previous URL but not with the objectswap method. I am more of a web designer than a programmer, but I have a sense that the flash document must have a fixed size in order for your script to work. Is there any way around this?
Thanks so much!
Sorry, the link seems to have been rejected… well here it is in a different form:
w w w . thestethoscope . com / flashscript . txt
Hello,
I’ve found your script and it works pretty fine in the most situations (including Java Applets) but I have a problem with a QuickTime VR object. This one loss the buttons bar at bottom when the script acts. Would you mind to take a look at this page?
http://www.bancajahabitat.com/obra-nueva/obra-nueva-piso-piloto-visita.aspx?Urbanizacion-PanoramicaII-Golf-San-Jorge
Thanks a lot in advance.
– Albin
Hi Albin,
I’m actually surprised you got it to work with Java Applets – it didn’t work when I tried it. I doubt this version can work with QuickTime VR, but I have a new experimental version that uses oop and Dom events instead of window.onload. At the moment you can get it from: http://www.belilovskypediatrics.com/scripts/objectSwap.js
Can you give it a go and let me know if that works for you?
Karina
Hi,
Thanks for continuing taking care of this problem.
Both scripts works fine with Applet when the applet is an “”. I write the “” in the place where people write “” so it works in IE and FF.
I can´t show you it giving you a URL at this time, sorry.
The URL I gave you in the last comment is now using your new script, so you can see there how it works … pretty fine but ….
With clean cache both scripts works fine.
But when I refresh the page, the new one has crashed sometimes (simply it doesn´t do anything and the object has to be activated by the user). And when I leave the page and go back time later, the button bar dissapear (the strange effect persists in this new version).
Whatever you need, to solve this or to try your new version, ask me.
– Albin
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.
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 https://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.