(SIADCAP)

SWFObject, IE and Dynamic Content (a problem)

July 22, 2009 @ 22:43:08

I’ve got a problem. The main players are my plugin, Internet Explorer (7, maybe 8, not 6) and SWFObject.

The original inkling of issues came via Anon’s comment, on my previous update post, that YouTube videos pulled down as part of the “more” section were broken. I tested this locally and saw that, with IE7, he/she was right. Of course, it’s not just YouTube. It would be any of the <object>/<embed> elements video sharing sites provide.

That really sucks.

The Fix (sorta)

After spending one night trying to figure out what I could do to fix this, it became obvious that the generally accepted solution to dynamically adding those flash objects to a page is to use SWFObject, which:

Offers a JavaScript API that aims to provide a complete tool set for embedding SWF files and retrieving Flash Player related information

I really (always optimistic) thought this would be a quick set of changes to the javascript file; call the swfobject.embedSWF method and be done with it. Best of all, swfobject.js is already distributed with the Wordpress install (which, by the way, I don’t see mentioned in the codex, the script handle to use to enqueue or set is as a dependency is 'swfobject'). But I couldn’t seem to get it to work, at least not in IE7.

That really sucks.

What IE Doesn’t Like

In the end, after much debugging with the uncompressed version of SWFobject, Firebug Lite and beaucoup de calls to console.log, I found the issue to be SWFobject’s call to outterHTML.

You see, when it creates this new element for the DOM, it needs someplace to put it. You provide the id of the element which will be used as that replacement. Sort of like the sacrificial lamb for the the new <object>. It’s through outterHTML that the replacement occurs. It sets the old element to be the new one.

435

el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';

createSWF function (line number as of version 2.2)

My plan was to replace the original object with the new one. When that didn’t work, I tried inserting a <div> as the target for replacement, right before the object, but that failed in the same way. Finally, I realized what was going on, and set as the replacement an item that already existed in the DOM (in other words, it wasn’t something pulled in and added dynamically by the RMRH plugin). That worked.

The problem seems to be that, when the element to be replaced has also been dynamically created, IE throws an exception when you try to change it. In other words, I created the sacrificial lamb and IE wants for it to have always existed.

The Fix Again (sorta, again)

But it bugged me that the call to outterHTML was the point-of-failure here. After all, I know I manipulate the DOM all the time in jQuery. Right? It provides replaceWith as part of its API after all, and that always seems to work.

So I replaced SWFObject’s call to outterHTML with jQuery’s replaceWith (does that count as ironic?), and the problem was solved.

So What Do I Do?

I don’t really want to change that one line and then bundle the modified swfobject.js file with my plugin. But that’s the only solution I can think of. Well, that and maybe just recreate (i.e. copy) the relevant SWFObject code in my javascript, to be used only with IE. But I can’t help but think there must be a better line of action here.

This has to be a relatively common situation. I mean, pull down content using AJAX, content happens to contain an embedded flash player, use SWFObject to make sure it renders in IE. I guess what’s missing is that in the common scenarios, an existing element is already set aside and ready to accept the new object. But I can’t do that with my plugin.

So what do I do?

11 Comments

Follow Comments