Creating Silverlight container with jQuery - does not work in IE9

Question

I have a web application that uses jQuery to dynamically create an silverlight object.

This works well in Chrome and Firefox, but not in IE9.

Here's a jsFiddle which demonstrates this: http://jsfiddle.net/Bx9we/5/
In this example, the link to the .XAP file is fake, but your browsers should at least display the orange background. (In the actual application I'm working on the .XAP file is real and does display properly in Chrome and Firefox).

---

A possible red herring:

I'm looking at the generated HTML using the F12 developer tools. In firefox and chrome, it looks like this:

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

But in IE9, it has transformed the data field into a different value.

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

The transformation of the data tag is discussed in this question .

---

Just in case jsFiddle isn't running:

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

THE HTML

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

and the 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

Well it works, if you use correct html: http://jsfiddle.net/Bx9we/7/

When creating an object tag in IE, you can not create it then add it to the dom in 2 operations. You have to create the object tag in an html string, then add the string to the dom.

$('some html').appendTo first creates the dom node - which won't work for object tag in 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

Are you running IE in 64bit mode? 64bit is supported in SL5 but not in SL4.

Answer 3

Would you not be better off having your Silverlight object in the original page (hidden) and simply move it to the appropriate div using JQuery where needed? Calls onto that object from JS are trivial (eg to tell it what to play).