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

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路径

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，下面我使用以下代码调用即可。

代码

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>

添加Silverlight应用到HTML

时间： 2024-07-31 08:18:26

添加Silverlight应用到HTML的相关文章

SharePoint 2013 中如何使用Silverlight

1.打开VS,创建一个Silverlight程序,如下图: 2.配置选择默认的,当然也可以不勾选Host Application,如下图: 3.添加Silverlight控件,2个label和1个button,定义一下属性: ID在Silverlight是Name,Text在Silverlight是Content,如下图: 4.双击button控件,编写控件的单击事件,如下图: 5.然后Build一下这个项目,如下图: 6.在浏览器中打开文件夹,如下图: 7.找到我们build出来的xap文件,

轻松建立Silverlight开发环境

创建Silverlight 4开发环境,微软提供最简单的方法是使用Web Platform Installer,进行"一键安装", 下载安装后,Web Platform Installer会自动检测哪些软件你已经安装 如果需要安装新的Developer Tools,只需要选中该项目,下面"Install"按钮会提示安装下一步. 通常来说,Silverlight 4 的开发环境需要包含以下几个开发工具: 1. Visual Studio 2010或者Visual We

在SharePoint页面嵌入简单的Silverlight程序

在SharePoint页面嵌入简单的Silverlight程序 1. 打开VS,新建项目Silverlight. 2. 命名MyBannerAd,确定. 3. 清除选项"在新网站中承载Silverlight应用程序",确定. 4. 右击项目添加文件夹Images.右击Images添加现有项,添加两个图片gear.png和branded.png. 5. 右击MainPage.xaml文件,选择视图设计器.编辑代码: 6. 你的Silverlight应用程序应该是这样: 7. 按下F5 测

silverlight调用MVC WebApi方法

1.创建ASP.NET MVC4 Web应用程序,选择WebAPI模板 2.添加silverlight项目 3.新建一个数据模型类,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace NetMVCAPI.Models { public class Contact { public int Id { get; set; } public string

使用Visual Studio 2010 创建简单的Silverlight应用程序

使用Visual Studio 2010 创建简单的Silverlight应用程序 Silverlight是创建动态的引人的RIAs(Rich Internet Application)的新方法.这里教你创建简单的Silverlight应用程序. 1. 打开VS,新建项目,选择Silverlight应用程序模板. 2. 命名mySimpleSilverlightApplication,点击确定. 3. 在弹出的对话框中,清除"在新网站中承载Silverlight应用程序"复选框,点击确

SharePoint 2013 Silverlight中使用Net客户端对象模型

1.创建Silverlight时,选择Silverlight 4,不要选择版本5,试了很久版本5都调用不了,自己也不知道什么原因,谷歌也没找到答案,后来尝试版本4,可以调用: 至于Host the Silverlight application是否勾选没有影响: 2.Silverlight中使用客户端脚本,和Net中不一样,要添加下面两个引用: 3.两个需要的引用,在服务器上位置为C:\Program Files\Common Files\Microsoft Shared\Web Server

Silverlight 之 创建

Silverlight 项目文件是您可以使用不同工具来创建和编辑的文本文件.例如,可以使用 Visual Studio 2010 以及 Expression Blend 来创建 Silverlight 项目或修改现有项目. 本文介绍如何使用 Visual Studio 2010 来创建和生成新的 Silverlight 应用程序项目或 Silverlight 类库项目,以及如何向项目添加 Silverlight 库程序集.  您需要以下组件来执行这些步骤: (1)Silverlight 4 或

微软云计算介绍与实践（实践之二十一）

接前面两篇,告诉大家一个坏消息和一个好消息:坏消息是本篇依旧环境搭建.配置准备工作,好消息是这是最后一篇. 一.数据仓库注册 小张下面注册数据仓库. 1.在System Center 2012 Service Manager控制台,转至管理 2.在管理概述页面,点击注册与服务管理数据仓库 3.在开始之前页面,选择下一步 4.在数据仓库页面,输入服务器名称ServiceMgrDW并选择Test Connection按钮 5.如果连接测试成功,请选择下一步 6.在认证页面,选择DW_ServiceM

[silverli—wcf]参数：调试资源字符串不可用，秘钥和参数通常提供足够的信息用以诊断问题。

这段时间在做一个项目,有一项需求是上传,经过思考之后,决定采取Silverlight+WCF的方式做上传操作.就在项目做完了之后,本地测试也都没问题,发布到服务器上的时候,顿时就出现故障了.在选择文件添加到上传队列中的时候,报错了, 提示说[参数:  调试资源字符串不可用.密钥和参数通常提供足够的信息用以诊断该问题.请访问 http://go.microsoft.com/fwlink /?linkid=106663&Version=4.0.50826.0&File=System.dll&a