JavaScript：如何动态添加一个Flash文件（SWF）到DOM，所以IE将加载它 [英] JavaScript: how to dynamically add a Flash file (SWF) to the DOM so IE will load it

问题描述

我有一些页面需要根据XML文件中的数据描述动态加载内容。可以动态加载的项目是SWF。我有一个代码通过http和文件协议和Chrome通过http协议正确加载和启动在Firefox的电影。我需要它在Internet Explorer中在http和文件协议中成功加载，但所有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; 
 
函数isIE（）{
 return navigator.userAgent.lastIndexOf（'Trident'）> 0; 
} 
 
函数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。宽度）; 
 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最终被添加到页面中的正确位置。

任何想法？

解决方案

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

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

  var createSwfObject = function（src，attributes，parameters）{
 var我，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.movi​​e = 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： '透明'}）; 
 document.body.appendChild（swfEl）; 
  

I have pages that need to dynamically load content based upon their data description in XML files. Among the items that may be dynamically loaded are SWFs. I have code that correctly loads and starts the movies in Firefox via the http and file protocols and Chrome via the http protocol. I need it to successfully load in Internet Explorer in both http and file protocols as well, but all Flash Video Player reports is 'Movie not loaded...'. Could someone please review the following information and give me a fix?

The description of Flash objects in the XML looks like this:

<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'
    ]
}

Eventually, this object is passed to a function that creates the DOM element (yes, I know the function is ordered oddly; I was trying 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 eventually added to the correct location in the page.

Any ideas?

解决方案

IE does not support dynamically adjusting most of the attributes/parameters of the object element.

You can use this function to create a cross-browser object element with the given 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);

这篇关于JavaScript：如何动态添加一个Flash文件（SWF）到DOM，所以IE将加载它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！