Создание контейнера Silverlight с помощью jQuery - не работает в IE9

Question

У меня есть веб-приложение, которое использует jQuery для динамического создания объекта silverlight.

Это хорошо работает в Chrome и Firefox, но не в IE9.

Вот jsFiddle, который демонстрирует это:http://jsfiddle.net/Bx9we/5/
В этом примере ссылка на файл .XAP поддельная, но браузеры должны по крайней мере отображать оранжевый фон.(В настоящем приложении я работаю над файлом .XAP, который является реальным и правильно отображается в Chrome и Firefox).

---

Возможная красная сельдь:

Я ищуна сгенерированный HTML с помощью инструментов разработчика F12.В 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 вы не можете создать его, а затем добавить его в домен в 2 операции. Вы должны создать тег объекта в HTML-строке, а затем добавить строку в DOM.

$ ('some html'). AppendTo сначала создает узел dom - который не будет работать для тега объекта в IE.

$(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

Не лучше ли разместить объект Silverlight на исходной странице (скрытой) и просто переместить его в соответствующий раздел, используя JQuery, где это необходимо?Вызовы этого объекта из JS тривиальны (например, чтобы сказать, что играть).

Answer 3

Вы используете IE в 64-битном режиме?64-битная поддержка поддерживается в SL5, но не в SL4.