Param elements being overwritten when flash object is added to the DOM via JavaScript in IE?

I put together some sample code to show what I'm talking about, but basically I need to dynamically add a bunch of HTML to a page that happens to contain a Flash movie that is relying on FlashVars being passed in from the html.

The problem is that when you dynamically add a flash object to the DOM in IE, it overwrites all of the param elements in the object for you... you know... to be "helpful".

Updating just the FlashVars param isn't an option, becuase Flash loads that once the first time and never again after that.

Here is the sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Object To DOM Test</title>
  <script type="text/javascript">
    function addSwfObject() {
      var t = document.getElementById('target');
      var s = document.getElementById('source');
      t.innerHTML += s.outerHTML;
    }
  </script>
</head>
<body>
  <button type="button" onclick="addSwfObject();">
    Add SWF Object</button>
  <object id="source" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"&gt;
    <param name="movie" value="/Some.swf" />
    <param name="FlashVars" value="Test=1" />
  </object>
  <div id="target">
  </div>
</body>
</html>

When you click the button and view the outcome via F12 (not "view source" because that reloads the page into the source screen), you'll see there are more than a dozen param elements and the FlashVars value will be "".

This works in every browser except IE.

ansaurus

tags:

views:

answers:

Param elements being overwritten when flash object is added to the DOM via JavaScript in IE?

related questions