Silverlight是跨浏览器，跨客户平台的浏览器插件，可以应用在Windows，Linux，Mac等平台。作为浏览器插件，Silverlight可以像Flash一样，很方便的嵌套在HTML页面中，下面我来介绍一下，如何添加Silverlight应用到HTML页面。
 
1. 首先，我们来看看VS2008自动生成的代码，新建一个Silverlight应用项目，Html_SilverlightChina，创建的时候选中将Silverlight项目分布到Web项目中。
 
2. 创建项目后，在Web项目中，会自动生成测试文档页面，分别是Html_SilverlightChinaTestPage.aspx和Html_SilverlightChinaTestPage.html，由于本文是讲述如何添加Silverlight应用到HTML，所以，我们将集中讲述Html_SilverlightChinaTestPage.html页面代码。
 
 
 
ExpandedBlockStart.gif HTML代码
 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml"   >
 3 
 4  < head >
 5       < title > Html_SilverlightChina </ title >
 6       < style  type ="text/css" >
 7      html, body  {
 8          height :  100% ;
 9          overflow :  auto ;
10       }
11      body  {
12          padding :  0 ;
13          margin :  0 ;
14       }
15      #silverlightControlHost  {
16          height :  100% ;
17          text-align : center ;
18       }
19       </ style >
20       < script  type ="text/javascript"  src ="Silverlight.js" ></ script >
21       < script  type ="text/javascript" >
22           function  onSilverlightError(sender, args) {
 23               var  appSource  =   "" ;
 24               if  (sender  !=   null   &&  sender  !=   0 ) {
 25                appSource  =  sender.getHost().Source;
 26              }
 27              
 28               var  errorType  =  args.ErrorType;
 29               var  iErrorCode  =  args.ErrorCode;
 30 
31               if  (errorType  ==   " ImageError "   ||  errorType  ==   " MediaError " ) {
 32                 return ;
 33              }
 34 
35               var  errMsg  =   " Unhandled Error in Silverlight Application  "   +   appSource  +   " \n "  ;
 36 
37              errMsg  +=   " Code:  " +  iErrorCode  +   "     \n " ;
 38              errMsg  +=   " Category:  "   +  errorType  +   "        \n " ;
 39              errMsg  +=   " Message:  "   +  args.ErrorMessage  +   "      \n " ;
 40 
41               if  (errorType  ==   " ParserError " ) {
 42                  errMsg  +=   " File:  "   +  args.xamlFile  +   "      \n " ;
 43                  errMsg  +=   " Line:  "   +  args.lineNumber  +   "      \n " ;
 44                  errMsg  +=   " Position:  "   +  args.charPosition  +   "      \n " ;
 45              }
 46               else   if  (errorType  ==   " RuntimeError " ) {           
 47                   if  (args.lineNumber  !=   0 ) {
 48                      errMsg  +=   " Line:  "   +  args.lineNumber  +   "      \n " ;
 49                      errMsg  +=   " Position:  "   +   args.charPosition  +   "      \n " ;
 50                  }
 51                  errMsg  +=   " MethodName:  "   +  args.methodName  +   "      \n " ;
 52              }
 53 
54               throw   new  Error(errMsg);
 55          }
 56       </ script >
57  </ head >
58  < body >
59       < form  id ="form1"  runat ="server"  style ="height:100%" >
60       < div  id ="silverlightControlHost" >
61           < object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >
62             < param  name ="source"  value ="ClientBin/Html_SilverlightChina.xap" />
63             < param  name ="onError"  value ="onSilverlightError"   />
64             < param  name ="background"  value ="white"   />
65             < param  name ="minRuntimeVersion"  value ="3.0.40818.0"   />
66             < param  name ="autoUpgrade"  value ="true"   />
67             < a  href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"  style ="text-decoration:none" >
68                  < img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />
69             </ a >
70           </ object >< iframe  id ="_sl_historyFrame"  style ="visibility:hidden;height:0px;width:0px;border:0px" ></ iframe ></ div >
71       </ form >
72  </ body >
73  </ html >
 
 
3. 在上面的HTML代码中，主要代码分为三部分，第一部分是样式表CSS代码，第二部分是Javascript脚本代码，第三部分是HTML Body代码。
对于CSS样式代码，这里不再赘述。我们来分析一下Javascript代码和HTML Body代码。首先说说Javascript脚本代码，在Javascript脚本中，有一个onSilverlightError函数，该函数的功能是处理Silverlight应用外部异常错误信息的。例如，如果浏览器无法下载XAP文件，该错误信息会由onSilverlightError函数处理，将会在浏览器中弹出报错窗口，出现报错时，Silverlight应用将停止运行。onSilverlightError函数作为默认的外部错误信息处理函数，在Silverlight中是这样调用的：
 
< param  name ="onError"  value ="onSilverlightError"   />
 
 
而通过Javascript中的
 
  throw   new  Error(errMsg);
 
 
传递错误信息到浏览器。 当然，开发人员可以根据需求自定义错误处理函数，或者修改错误处理函数。例如，修改errMessage为errorLocation.InnerHTML,错误信息显示也会不同。
 
4. <Object>标签是调用Silverlight的主要标签，该标签中包含了很多属性标签，其中关键的属性是"type"，该标签标识了该Silverlight应用所需要的Silverlight版本。在本应用中，我建立的是Silverlight 3应用， type ="application/x-silverlight-2"，  该标签和Silverlight 2 的type标签内容相同，我查看了Silverlight 3 Release Note，微软解释是为了Silverlight2应用升级到Silverlight3兼容性，使用相同标签内容。我看了一下Silverlight beta 2版本的标签，是type="application/x-silverlight-2-b2"。
 
 1  < object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >
 2             < param  name ="source"  value ="ClientBin/Html_SilverlightChina.xap" />
 3             < param  name ="onError"  value ="onSilverlightError"   />
 4             < param  name ="background"  value ="white"   />
 5             < param  name ="minRuntimeVersion"  value ="3.0.40818.0"   />
 6             < param  name ="autoUpgrade"  value ="true"   />
 7             < a  href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"  style ="text-decoration:none" >
 8                  < img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />
 9             </ a >
10           </ object >
 
 
在<Object>标签中，<param>标签定义了Silverlight实例参数。其中"source"是比较重要的一个参数，标识XAP文件的位置。有些时候，根据项目需要，也可以将source留为空，然后在XAML中使用Javascript代码进行调用。
对于Object的参数，我想使用一个表格来列述：
 
参数
介绍
AutoUpgrade
  允许开发人员控制终端用户的 Silverlight 是否自动升级。默认为 True
Background
设置应用背景颜色，默认为 Null
enableFramerateCounter
是否在浏览器状态栏显示当前帧速率，默认为 false
enableHtmlAccess
是否允许访问浏览器 DOM ，默认为 false ，如果为 true ，将允许 Silverlight 访问网页
iniParams
初始化参数信息，通过该参数可以从网页传递参数到 Silverlight 应用中，在 Silverlight 中可以通过后台代码获取参数（非常有用）
minRuntimeVersion
运行该应用的最低 Silverlight 版本，在本例中，最低版本是 Silverlight 3.0.40818.0
maxFramerate
  设置最大的帧速率，默认是每秒 60 帧
onLoad
可以在本事件中调用自定义 Javascript 函数
splashScreenSource
设置一个 xaml 文件作为下载 XAP 的时候，动画开始页面
Source
XAP 路径
<?XML:NAMESPACE PREFIX = O />

 

 5. 在<Object>中有一段代码是这样的：
 
< a  href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"  style ="text-decoration:none" >
                < img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />
           </ a >
 
 
这段代码是检测如果浏览器没有安装Silverlight客户端插件，会显示"Get Silverlight"的图片，提示用户下载并安装Silverlight客户端。有的国内的开发人员认为每次到微软网站下载速度太慢，可以修改" http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"链接,让用户到本地或者指定连接下载Silverlight客户端插件。
 
 我们来完成上面的项目，添加简单代码，完成演示，
 我上传了一个XAP文件到cnblogs，下面我使用以下代码调用即可。
 
ExpandedBlockStart.gif 代码
 1  < object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >
 2             < param  name ="source"  value ="/jv9/Html_SilverlightChina.xap" />
 3             < param  name ="onError"  value ="onSilverlightError"   />
 4             < param  name ="background"  value ="white"   />
 5             < param  name ="minRuntimeVersion"  value ="3.0.40818.0"   />
 6             < param  name ="autoUpgrade"  value ="true"   />
 7             < a  href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"  style ="text-decoration:none" >
 8                  < img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />
 9             </ a >
10           </ object >
 
本文为原创文章，首发 银光中国网（ SilverlightChina.Net)