I’ve been working on a widget project that involves Flash and Javascript, and came across some very strange behaviour in IE6 / 7. The object tag to render the flash movie is dynamically added to the page at runtime using standard DOM methods - document.createElement, setAttribute, appendChild etc. Life was wonderful until I opened Internet Explorer, which hangs with what looks like a request for a file with no timeout (progress bar moving very slowly but never completing). This is identical behaviour to how IE behaves when the location of the SWF is invalid.
The markup
The markup I was generating was based on Flash Satay. Including this as static markup in a page works fine. Simple example below…
<object type='application/x-shockwave-flash' data='test.swf' width='420' height='155'>
<param name='movie' value='test.swf' />
</object>
DOM approach that chokes IE
The following approach causes IE to choke…
<script type="text/javascript">
var object = document.createElement('object');
object.setAttribute('type', 'application/x-shockwave-flash');
object.setAttribute('data', 'test.swf');
object.setAttribute('width', '100');
object.setAttribute('height', '100');
var param = document.createElement('param');
param.setAttribute('name', 'movie');
param.setAttribute('value', 'test.swf');
object.appendChild(param);
document.body.appendChild(object);
</script>
The solution / workaround
For some reason if the object tag + params are parsed at the same time everything works fine, so the solution involves using the alternate approach to manipulating the DOM - innerHTML. This wouldn’t have been my first choice given the situation, but it seems to be the only way to get this working. A version that works in IE…
<script type="text/javascript">
var fragment =
"<object type='application/x-shockwave-flash' data='test.swf' width='100' height='100'>" +
"<param name='movie' value='test.swf' />" +
"</object>";
var container = document.createElement('div');
container.innerHTML = fragment;
document.body.appendChild(container);
</script>
This achieves the same end result - a DOM element node that can be inserted anyway you wish, but avoid the problem in IE.