JavaScript: how to dynamically add a Flash (SWF) file to the DOM so that IE loads it

Question

I have pages that need to dynamically load content based on their description of the data in XML files. Among the elements that can be dynamically loaded are SWF. I have code that correctly downloads and runs movies in Firefox via http and file protocols and Chrome via http protocol. I need it to successfully load in Internet Explorer both in the HTTP protocol and in files, but all Flash Video Player reports "Movie is not loaded ...". Can someone please review the following information and let me fix it?

The description of the Flash objects in XML is as follows:

<multimedia type='flash' swf='swf/filename_here.swf' width='600' height='400' version='7.0.19.0' /> 

I have JavaScript that parses this and creates an object that looks like the following JSON:

 { 'tag': 'multimedia', 'attributes': [ 'type': 'flash', 'swf': 'swf/filename_here.swf', 'width': '600', 'height': '400', 'version': '7.0.19.0' ] } 

In the end, this object is passed to the function that creates the DOM element (yes, I know that the function is ordered in a strange way, I tried to try different things to make it work):

 var path = var path = document.location.href; path = path.substr(0, path.lastIndexOf('/') + 1); var version = null; function isIE() { return navigator.userAgent.lastIndexOf('Trident') > 0; } function buildFlash(element) { version = element.attributes.version; var name = document.createElement('param'); name.setAttribute('name', 'movie'); name.setAttribute('value', path + element.attributes.swf); (if (!isIE()) { var inner = document.createElement('object'); inner.setAttribute('type', 'application/x-shockwave-flash'); inner.setAttribute('data', path + element.attributes.swf); inner.setAttribute('width', element.attributes.width); inner.setAttribute('height', element.attributes.height); } var flash = document.createElement('object'); flash.setAttribute('id', 'flashMovie'); flash.setAttribute('classid', 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'); flash.setAttribute('width', element.attributes.width); flash.setAttribute('height', element.attributes.height); flash.appendChild(name); if (!isIE()) { flash.appendChild('inner'); } var div = document.createElement('div'); div.setAttribute('id', 'multimedia'); div.appendChild('flash'); return div; } 

The resulting div is ultimately added to the correct location on the page.

Any ideas?

Answer 1

IE does not support the dynamic configuration of most attributes / parameters of an object element.

You can use this function to create an object with several browsers with the specified attributes and parameters.

 var createSwfObject = function(src, attributes, parameters) { var i, html, div, obj, attr = attributes || {}, param = parameters || {}; attr.type = 'application/x-shockwave-flash'; if (window.ActiveXObject) { attr.classid = 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'; param.movie = src; } else { attr.data = src; } html = '<object'; for (i in attr) { html += ' ' + i + '="' + attr[i] + '"'; } html += '>'; for (i in param) { html += '<param name="' + i + '" value="' + param[i] + '" />'; } html += '</object>'; div = document.createElement('div'); div.innerHTML = html; obj = div.firstChild; div.removeChild(obj); return obj; }; 

Example

 var swfEl = createSwfObject('http://example.com/example.swf', {id: 'myid', 'class': 'myclass', width: 100, height: 100}, {wmode: 'transparent'}); document.body.appendChild(swfEl);