JavaScript:如何动态地将Flash文件(SWF)添加到DOM,以便IE加载它

时间:2011-02-21 19:40:20

标签: javascript flash internet-explorer dom

我的页面需要根据XML文件中的数据描述动态加载内容。可动态加载的项目包括SWF。我有代码通过http和文件协议正确加载和启动Firefox中的电影,Chrome通过http协议启动。我需要它在http和文件协议中成功加载Internet Explorer,但所有Flash Video Player报告都是“Movie not loaded ...”。有人可以查看以下信息并给我一个解决方法吗?

XML中Flash对象的描述如下:

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

我有JavaScript解析它并创建一个类似于以下JSON的对象:

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

最终,这个对象被传递给一个创建DOM元素的函数(是的,我知道函数的排序很奇怪;我正在尝试不同的东西让它工作):

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;
 }

生成的div最终会添加到页面中的正确位置。

有什么想法吗?

1 个答案:

答案 0 :(得分:9)

IE不支持动态调整对象元素的大部分属性/参数。

您可以使用此功能创建具有给定属性和参数的跨浏览器对象元素。

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;
};

实施例

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