Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

我们在使用Visual Studio IDE创建Silverlight工程时，默认情况下都会自动生成一个用于调试和预览Silverlight的Web工程，该工程包含了html和aspx页面，以及Silverlight.js脚本文件。默认情况下，生成的页面代码可能与下面的代码类似：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml"   >  

< head >  
     < title > IRERTranscript </ title >  
     < style  type ="text/css" >  
    html, body  {  
        height :  100% ;  
        overflow :  auto ;  
     }  
    body  {  
        padding :  0 ;  
        margin :  0 ;  
     }  
    #silverlightControlHost  {  
        height :  100% ;  
        text-align : center ;  
     }  
     </ style >  
     < script  type ="text/javascript"  src ="Silverlight.js" ></ script >  
     < script  type ="text/javascript" >  
         function  onSilverlightError(sender, args) { 
             var  appSource  =   "" ; 
             if  (sender  !=   null   &&  sender  !=   0 ) { 
              appSource  =  sender.getHost().Source; 
            } 
             
             var  errorType  =  args.ErrorType; 
             var  iErrorCode  =  args.ErrorCode; 

             if  (errorType  ==   " ImageError "   ||  errorType  ==   " MediaError " ) { 
               return ; 
            } 

             var  errMsg  =   " Unhandled Error in Silverlight Application  "   +   appSource  +   " \n "  ; 

            errMsg  +=   " Code:  " +  iErrorCode  +   "     \n " ; 
            errMsg  +=   " Category:  "   +  errorType  +   "        \n " ; 
            errMsg  +=   " Message:  "   +  args.ErrorMessage  +   "      \n " ; 

             if  (errorType  ==   " ParserError " ) { 
                errMsg  +=   " File:  "   +  args.xamlFile  +   "      \n " ; 
                errMsg  +=   " Line:  "   +  args.lineNumber  +   "      \n " ; 
                errMsg  +=   " Position:  "   +  args.charPosition  +   "      \n " ; 
            } 
             else   if  (errorType  ==   " RuntimeError " ) {            
                 if  (args.lineNumber  !=   0 ) { 
                    errMsg  +=   " Line:  "   +  args.lineNumber  +   "      \n " ; 
                    errMsg  +=   " Position:  "   +   args.charPosition  +   "      \n " ; 
                } 
                errMsg  +=   " MethodName:  "   +  args.methodName  +   "      \n " ; 
            } 

             throw   new  Error(errMsg); 
        } 
     </ script >  
</ head >  
< body >  
     < form  id ="form1"  runat ="server"  style ="height:100%" >  
     < div  id ="silverlightControlHost" >  
         < object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >  
           < param  name ="source"  value ="ClientBin/example.xap" />  
           < param  name ="onError"  value ="onSilverlightError"   />  
           < param  name ="background"  value ="white"   />  
           < param  name ="minRuntimeVersion"  value ="4.0.50401.0"   />  
           < param  name ="autoUpgrade"  value ="true"   />  
           < a  href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"  style ="text-decoration:none" >  
                < img  src ="http://go.microsoft.com/fwlink/?LinkId=161376"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />  
           </ a >  
         </ object >< iframe  id ="slExample"  style ="visibility:hidden;height:0px;width:0px;border:0px" ></ iframe ></ div >  
     </ form >  
</ body >  
</ html >

　　我们可以给object对象传递不同的参数，如xap包的加载地址，onLoad或onError事件句柄，背景色，最小版本号支持等等，完整的参数信息读者可以参考Silverlight 3中param参数列表汇总。object对象中一般会包含一段<a>标记，是用来显示当客户端浏览器未安装Silverlight插件时要显示的内容的，我们可以自定义其中的内容，如： 

< object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >  
   < param  name ="source"  value ="ClientBin/example.xap" />  
   < param  name ="onError"  value ="onSilverlightError"   />  
   < param  name ="background"  value ="white"   />  
   < param  name ="minRuntimeVersion"  value ="4.0.50401.0"   />  
   < param  name ="autoUpgrade"  value ="true"   />  
< img  src ="/images/NonSilverlight.jpg"  style ="border-style: none"  usemap ="#NonSilverlight"   />  
< map  name ="NonSilverlight"  id ="NonSilverlight" >  
    < area  shape ="RECT"  coords ="154,87,362,183"  title ="Get Microsoft Silverlight" href ="http://www.microsoft.com/silverlight/resources/install.aspx"  target ="_blank"   />  
</ map >  
</ object >

　　当客户端浏览器未安装Silverlight插件时，程序会在相应的区域显示一张带有热区的图片，热区指向的位置是Microsoft提供的Silverlight安装地址。理论上，你可以指定任何的自定义代码来显示nonSilverlight的效果，但是Silverlight默认没有提供低版本Silverlight情况下要显示的效果，也就是lowSilverlight的情况。

　　Silverlight可以自动实现向前兼容，也就是在低版本下编译的Silverlight包可以在高版本下运行，相反，在高版本下编译的Silverlight包不能再低版本下运行，此时Silverlight插件会显示一张默认的图片用来告知用户升级插件，并弹出一个提示框，如下图：

　　个人觉得这种用户体验并非很好，试想，如果当前页面上有多个Silverlight插件，岂不是要弹出多个提示框吗？那么如何来解决这个问题呢？事实上，我们除了直接在页面上添加object标记来呈现Silverlight外，还可以通过javascript脚本来动态添加Silverlight。Silverlight.js脚本为我们提供了一系列可用的方法，详细内容大家可以参考下msdn http://msdn.microsoft.com/zh-cn/library/cc838126(v=VS.95).aspx#isinstalled

　　以及如何通过脚本在页面上添加Silverlight，http://msdn.microsoft.com/zh-cn/library/cc265155(v=VS.95).aspx

　　msdn上给出了非常详细的例子来告诉我们如何使用这些脚本方法，有一点需要注意，使用Silverlight.js文件时一定要与当前Silverlight版本相一致，否则可能会有脚本错误，对应的Silverlight.js文件可以在微软的站点上下载，你会发现其实有很多个可用的版本，其中还包括支持调试的版本哦。

　　createObject方法参数在使用的时候有几个问题需要注意下：

　　1. 参数按顺序指定，如果有不需要传递的参数可用null代替。

　　2. parent element参数必须指定，也就是object标记的父元素，可直接将元素的id当做对象传入，但是在Firefox中不支持，此时可以使用document.getElementById('elementId')语句代替该参数即可。

　　3. param列表通过数组传递，参数名称与在object标记中使用的名称保持一致即可。

　　4. 事件列表如果没有对应的页面脚本则传null值，否则会报脚本错误。

　　5. 最后一个参数context如果不需要可以省去，不用传null或空值。

　　你应该注意到了，在使用createObject方法时我们可以顺便给Silverlight指定nonSilverlight效果，这个是通过param列表中的altHtml参数来指定的，实施上，我们在页面上直接使用object标记呈现Silverlight时也可以使用alt属性来指定nonSilverlight效果，这个与在object标记中直接插入html代码的效果相同。

　　通过使用createObject方法，我们完全可以自定义lowSilverlight效果了，下面是一个例子：

< div  id ="divSilverlightContent" >
     < script  type ="text/javascript" >
         if  (Silverlight.isInstalled( " 4.0.50303.0 " )){
            Silverlight.createObject( " ClientBin/SilverlightApplication1.xap " ,
            document.getElementById( ' divSilverlightContent ' ),
             null ,
            { width:  " 532px " , height:  " 380px " , background:  " white " , version: " 4.0.50303.0 " , windowless: " true "  },
             null ,
             " param1=value1,param2=value2 " );
        }
         else  {
            document.write( ' <img src="images/NonSilverlight.jpg" style="border-style: none" usemap="#SLMap3D_NonSilverlight" /> '
                 +   ' <map name="NonSilverlight" id="NonSilverlight"> '
                 +   ' <area shape="RECT" coords="154,87,362,183" title="Get Microsoft Silverlight" href="http://www.microsoft.com/silverlight/resources/install.aspx" target="_blank" /> '
                 +   ' </map> ' );
        }
     </ script >
     < iframe  style ='visibility:  hidden; height: 0; width: 0; border: 0px' ></ iframe >
</ div >

 　　使用Silverlight.isInstalled()方法可以判断客户端浏览器是否已经安装了指定版本的Silverlight插件，如果已经安装了，则使用Silverlight.createObject方法创建Silverlight对象，否则输出自定义的内容。

　　这里还有一篇文章个人觉得很有用，给大家分享下吧！

http://www.itstrike.cn/Question/Use-JavaScript-to-create-Silverlight-Object-createObject

本文转自Jaxu博客园博客，原文链接：http://www.cnblogs.com/jaxu/archive/2010/06/28/1766804.html，如需转载请自行联系原作者