Working on one huge project is always a challenge. Recently I got a challenge of including a streamable flash player into our application.
Since I’m a web-standards fan, I do not think that the use of HTML markup generated by Flash is acceptable since it’s not valid at all (yes, we’re using XHTML 1.0 here at Wildbit). Another problem is that new MSIE update comes with brand new inclusion of Active-X objects into the HTML pages. It means that “…users cannot directly interact with Microsoft ActiveX controls loaded by the APPLET, EMBED, or OBJECT elements“ (more information about this).
The solution is an amazing javascript toolkit SWFObject. It solves all problems and it is easy to use and integrate with the developer's framework too. So I’ve immediately downloaded and included it into our project.
Here the problem begins…
It works fine in all Gecko-browsers such as Mozilla, Firefox etc. But it crashes on MSIE. Whoa, I’m not surprised at all! I started to discover the issue, but I couldn’t find any solution over the Internet. Seems strange to me…
I started digging into my HTML pages and javascript and after several hours spent on it I ended up trying to remove all surrounding markup
(hey, I have very complex page) from the place I tried to include my flash player. And it helped! I was so surprised and continued digging deeper. I switched off all my javascript and returned the markup. Still works. Hmmm… Here is the problem!
Let me explain. I’m using prototype framework and a lot of other javascript, most of which works with DOM on initialization. Also, I use onDOMready event to serve dynamic functionality as fast as possible. But SWFObject uses inline initialization (and we need it while all pages are dynamic) of flash contents. In other words, the problem was (as I understood) caused by some kind of conflicts on the page’s initialization stage. It seemed that all JS stuff tried to execute simultaneously.
So, I decided to modify the SWFObject method of including flash movies into pages. Natively SWFObject modifies DOM “on-the-fly”. I’ve created 2 new functions in my global.js file – registerSWFObject and initSWFObjects. The first collects all markup and ID’s of elements to include to generated by SWFObject into an array. The second one includes all collected flash objects into the document. Calling the initSWFObjects function on initialization stage solves the problem.
PS: I’ve looked at Adobe web-site trying to find something there, and found out that it uses the same modification of SWFObject too. It seems the problem lies not on onDOMready extension, but rather then in new MSIE behavior or even in new Flash 9 plug-in.