jQuery로 Silverlight 컨테이너 만들기 - IE9에서는 작동하지 않습니다.

Question

jQuery를 사용하여 동적으로 실버 라이트 객체를 만드는 웹 응용 프로그램이 있습니다.

이 기능은 Chrome과 Firefox에서는 잘 작동하지만 IE9에서는 제대로 작동하지 않습니다.

여기이 보여주는 jsFiddle의 :이 예에서는 http://jsfiddle.net/Bx9we/5/
을의 .XAP 파일에 대한 링크는 가짜입니다,하지만 당신의 브라우저는 적어도 오렌지 배경을 표시해야한다. (실제 응용 프로그램에서는 .XAP 파일로 작업 중이며 Chrome과 Firefox에서는 제대로 표시됩니다.)

---

가능한 레드 헤링 (Red Herring) : 나는 F12 개발자 도구를 사용하여 생성 된 HTML 찾고 있어요

. 파이어 크롬, 그것은 다음과 같다 :

<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 --!> 

데이터 태그의 변환은 this question에서 논의됩니다.

---

그냥 경우 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> 

및 자바 스크립트 :

$(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 문자열에 object 태그를 만든 다음 dom에 문자열을 추가해야합니다.

$ ('some html'). appendTo는 먼저 IE에서 객체 태그에 대해 작동하지 않는 dom 노드를 만듭니다.

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

IE를 64 비트 모드로 실행하고 있습니까? 64 비트는 SL5에서는 지원되지만 SL4에서는 지원되지 않습니다.

Answer 3

원래 페이지 (숨김)에 Silverlight 개체를 가지고 더 좋게하지 않고 필요한 경우 JQuery를 사용하여 해당 div로 옮기는 것이 어떻습니까? JS에서 해당 객체로 호출하는 것은 간단합니다 (예 : 재생할 내용을 알려주는 것). http://jsfiddle.net/Bx9we/7/

IE에서 개체 태그를 생성, 당신은 다음을 만들고이 작업에 DOM 에 추가 할 수 없습니다 당신이 올바른 HTML을 사용하는 경우