使用jQuery创建Silverlight容器 - 在IE9中不起作用

Question

我有一个使用jQuery动态创建silverlight对象的Web应用程序。

这适用于Chrome和Firefox，但不适用于IE9。

这是一个证明这一点的jsFiddle： http ： //jsfiddle.net/Bx9we/5/
在此示例中，指向.XAP文件的链接是假的，但您的浏览器至少应显示橙色背景。 （在实际应用程序中，我正在处理.XAP文件是真实的，并且可以在Chrome和Firefox中正确显示）。

---

可能的红鲱鱼：

我正在使用F12开发人员工具查看生成的HTML。 在firefox和chrome中，它看起来像这样：

<object 
       data="data:application/x-silverlight-2," 
       type="application/x-silverlight-2" 
       id="SilverlightControl" height="292" width="396">
       <!-- continued --!>

但在IE9中，它已将数据字段转换为不同的值。

   <object 
       id="SilverlightControl" 
       data="data:application/x-oleobject;base64,QfXq3+HzJEysrJnDBxUISgAJAADtKAAALR4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" 
       width="396" 
       type="application/x-silverlight-2" 
       height="292">
          <!-- continued --!>

在这个问题中讨论了数据标签的转换。

---

以防jsFiddle未运行：

CSS

div.overlaid
{
    border:3px solid darkgray;
    background:black;
    height:312px;
    width:396px;
    position:absolute;
    top:50px;
    left:50px;
}
.videoPopupCloseLink
{
    position:absolute;
    bottom:6px;
    right:6px;
    color:White;
}

HTML

<button id="createOverlay">Create Overlay</button>

和javascript：

$(function()
  {
      $('div.overlaid').remove();
      $('#createOverlay').click(function() {
            var div = $('<div />')
                .addClass('overlaid')
                .appendTo('body');

            var silverlightSource = './dummy_source.xap';
          var fileName='buy_duff_beer.wmv';
          var entityId=39874;
           var initParams = '<param id="initParams" name="initParams" value="fileName=' + fileName + ',entityid=' + entityId + '" />';
        $('<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id="SilverlightControl" height="292" width="396" />')
                            .append($('<param></param>').attr({ name: "source", value: silverlightSource }))
                            .append("<param name='background' value='orange' />")
                            .append("<param name='onerror' value='onSilverlightError' />")
                            .append("<param name='minRuntimeVersion' value='4.0.50826.0' />")
                            .append("<param name='autoUpgrade' value='true' />")
                            .append(initParams)
                            .append('<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/></a>')
                            .appendTo(div);

         $('<a />')
                    .addClass('videoPopupCloseLink')
                    .text('close')
                    .click(function () { $('div.overlaid').remove() })
                    .appendTo(div);
}
    );
}
);

Answer 1

好吧，如果你使用正确的HTML，它的工作原理： http ： //jsfiddle.net/Bx9we/7/

在IE中创建对象标记时，无法创建它，然后将其添加到dom in 2操作中。 您必须在html字符串中创建对象标记，然后将该字符串添加到dom。

$（'some html'）。appendTo首先创建dom节点 - 它不适用于IE中的object标签。

$(function() {
$('div.overlaid').remove();

  $('#createOverlay').click(function() {

var silverlightSource = './dummy_source.xap';
var fileName='buy_duff_beer.wmv';
    var entityId=39874;

$("body").append('<div class="overlaid"><object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id="SilverlightControl" height="292" width="396" >\
      <param name="source" value="'+silverlightSource+'"></param>\
      <param name="background" value="orange" ></param>\
      <param id="initParams" name="initParams" value="fileName=' + fileName + ',entityid=' + entityId + '" ></param>\
      </object></div>\
      ');

  });

}）;

Answer 2

你在64位模式下运行IE吗？ SL5支持64位，但SL4不支持。

Answer 3

你最好不要在原始页面（隐藏）中使用Silverlight对象，只需在需要时使用JQuery将其移动到适当的div中吗？ 从JS调用该对象是微不足道的（例如告诉它要播放什么）。