添加Silverlight应用到HTML

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页面代码。

添加Silverlight应用到HTML

HTML代码

1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<htmlxmlns="http://www.w3.org/1999/xhtml">
3
4<head>
5<title>Html_SilverlightChina</title>
6<styletype="text/css">
7html,body{
8height:100%;
9overflow:auto;
10}
11body{
12padding:0;
13margin:0;
14}
15#silverlightControlHost{
16height:100%;
17text-align:center;
18}
19</style>
20<scripttype="text/javascript"src="Silverlight.js"></script>
21<scripttype="text/javascript">
22functiononSilverlightError(sender,args){
23varappSource="";
24if(sender!=null&&sender!=0){
25appSource=sender.getHost().Source;
26}
27
28varerrorType=args.ErrorType;
29variErrorCode=args.ErrorCode;
30
31if(errorType=="ImageError"||errorType=="MediaError"){
32return;
33}
34
35varerrMsg="UnhandledErrorinSilverlightApplication"+appSource+"/n";
36
37errMsg+="Code:"+iErrorCode+"/n";
38errMsg+="Category:"+errorType+"/n";
39errMsg+="Message:"+args.ErrorMessage+"/n";
40
41if(errorType=="ParserError"){
42errMsg+="File:"+args.xamlFile+"/n";
43errMsg+="Line:"+args.lineNumber+"/n";
44errMsg+="Position:"+args.charPosition+"/n";
45}
46elseif(errorType=="RuntimeError"){
47if(args.lineNumber!=0){
48errMsg+="Line:"+args.lineNumber+"/n";
49errMsg+="Position:"+args.charPosition+"/n";
50}
51errMsg+="MethodName:"+args.methodName+"/n";
52}
53
54thrownewError(errMsg);
55}
56</script>
57</head>
58<body>
59<formid="form1"runat="server"style="height:100%">
60<divid="silverlightControlHost">
61<objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%">
62<paramname="source"value="ClientBin/Html_SilverlightChina.xap"/>
63<paramname="onError"value="onSilverlightError"/>
64<paramname="background"value="white"/>
65<paramname="minRuntimeVersion"value="3.0.40818.0"/>
66<paramname="autoUpgrade"value="true"/>
67<ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">
68<imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="GetMicrosoftSilverlight"style="border-style:none"/>
69</a>
70</object><iframeid="_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中是这样调用的：

<paramname="onError"value="onSilverlightError"/>

而通过Javascript中的

thrownewError(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<objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%">
2<paramname="source"value="ClientBin/Html_SilverlightChina.xap"/>
3<paramname="onError"value="onSilverlightError"/>
4<paramname="background"value="white"/>
5<paramname="minRuntimeVersion"value="3.0.40818.0"/>
6<paramname="autoUpgrade"value="true"/>
7<ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">
8<imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="GetMicrosoftSilverlight"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路径

5. 在<Object>中有一段代码是这样的：

<ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">
<imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="GetMicrosoftSilverlight"style="border-style:none"/>
</a>

这段代码是检测如果浏览器没有安装Silverlight客户端插件，会显示"Get Silverlight"的图片，提示用户下载并安装Silverlight客户端。有的国内的开发人员认为每次到微软网站下载速度太慢，可以修改"http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"链接,让用户到本地或者指定连接下载Silverlight客户端插件。

我们来完成上面的项目，添加简单代码，完成演示，

我上传了一个XAP文件到cnblogs，下面我使用以下代码调用即可。

代码

1<objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2"width="100%"height="100%">
2<paramname="source"value="/jv9/Html_SilverlightChina.xap"/>
3<paramname="onError"value="onSilverlightError"/>
4<paramname="background"value="white"/>
5<paramname="minRuntimeVersion"value="3.0.40818.0"/>
6<paramname="autoUpgrade"value="true"/>
7<ahref="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"style="text-decoration:none">
8<imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="GetMicrosoftSilverlight"style="border-style:none"/>
9</a>
10</object>

本文为原创文章，首发银光中国网（SilverlightChina.Net)

在线演示： http://www.silverlightchina.net/html/tips/2009/1224/470.html